javascript - 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().