Question

I have some tabs in header and use Xajax to load big modules – almost whole page. There are some class inside that I use to call by jQuery (like anchor with some class and then click event…).
But when I load a new module and assign new content (with new classes and id’s) jQuery selectors seem don’t work – i.e after click anchor nothing is happen.

Quite similar situation appear when you forget $(document).ready(…) using jQuery.
Is there any solution to tell jQuery about new content, new class and id’s, that wasn’t available when page was loaded?

Answer 1

This is because you’re event binding only works for DOM elements that exist when the binding is called. Since your modules are loaded after the binding ($('#sel').click(..)) is called, those DOM elements will not be bound to the event handler.

To work around this, you can use the jQuery .live() method to bind elements that will be loaded later. jQuery will keep track of all the new DOM items being created and will call the binding on the new elements as well.

http://api.jquery.com/live/

LIVE DEMO

 <div class="clickme">
    Click here
  </div>

$('.clickme').click(function(){
    alert('click event from normal binding!');
    $(this).parent().append('<div class="clickme">Click here - won\'t trigger for normal bind</div>');
})


$('.clickme').live('click', function(){
    alert('click event from live binding!');
})