jQuery - how to assign click() to an element inside html that was loaded using load()

Question

I'm a novice at jQuery, so go easy on me!

I'd like to assign a click() function to an element inside a div. The trouble is that the element has been loaded from an external html source.

In other words, I'm loading a "close" button inside a div that should hide the div itself.

The result I'm getting is that the close button does nothing when clicked. What am I doing wrong?

Thanks!

index.html:

<html>
<head>...</head>
<body>

   <div id="container"></div>

</body>
</html>

load.js:

$(document).ready(function() {
    $('#container').load('content.html');
});

content.html

<html>
<head>...</head>
<body>

   <div id="close"></div>

</body>
</html>

close.js

$(document).ready(function(){
    $("#close").click(function(){
        $("#container").hide(0);    
    });
});

i'm loading close.js in index.html, but i've tried loading it in both index.html and content.html, still no dice... — p1xelarchitect, Jul 06 '13 at 07:50

score 1 · Accepted Answer · answered Jul 06 '13 at 07:48

1

Use on().

$(document).ready(function(){
    $("#container").on('click', '#close', function(){
        $("#container").hide(0);    
    });
});

answered Jul 06 '13 at 07:48

Nadh

1 Answers1