jQuery click() event not firing on AJAX loaded HTML elements

Question

the subject is pretty descriptive of my problem, I am assuming it won't work this way, is there a way to make it work? (workaround)?

Here is the code that is loaded via AJAX:

<div>
<div id="s0frame" class="sframe"></div>
<div id="s1frame" class="sframe"></div>
<div id="s2frame" class="sframe"></div>
<div id="s3frame" class="sframe"></div>
<div id="s4frame" class="sframe"></div>
<div id="s5frame" class="sframe"></div>
<div id="chatframe" class="chat alpha60"></div>
</div>

Here is my click event:

$('.sframe').bind('click', function() { 
    var seat_number = this.id.match(/\d/g);
    alert(seat_number); 
});

Answer 1

Do this.

 $(document).on("click",".sframe",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 
 });

or

 $(document).delegate(".sframe","click",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 

 });

Edit:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate().

Answer 2

you have to re-attach the event handlers to the dynamically added elements into the DOM. .live method was used widely but now its deprecated. In jQuery version 1.7+ you can use .on or alternatively you can use .delegate

$(document).on("click",".sframe",function(e){

});

using delegate

$(document).delegate(".sframe","click",function(e){

});

Answer 3

Unless you are calling that .bind() function after that markup is loaded onto the page, you need to use another function like .live() or preferably if using a recent version of jQuery, .on() because .bind() only targets DOM elements already present when run whereas .live() and .on() give you different scope options for keeping track of elements added to the page.