jQuery .click() handler not firing on DJAX-loaded page

[feifanzhou]

DJAX is brilliant and really easy to use—thank you!

However, event handlers are not firing for me on a DJAX-loaded page. .click() and .keydown() are two that I've noticed so far.

If I visit a page URL directly (entering it in the URL bar), all the event handlers work perfectly. They stop working (don't seem to get triggered) on a DJAX-loaded page, unless I re-bind them using the djaxLoad event, in which case everything loads fine.

Any ideas on why this is, and how to fix it?

Thanks!

[beezee]

@feifanzhou if the targeted elements aren't there when the initial binding occurs, this will happen. The solution is to use delegated events so instead of this:

$('#target-id').click(function() { //do something; });

you do this:

$('body').on('click', '#target-id', function() { //do something; });

The binding is actually on an element that is loaded initially (like the document body) and only responds when an event bubbled up from the scope you pass as the second argument to $.fn.on, so this will work for dynamically added elements as well.

[akinayturan]

i can give an example like @beezee said :) and also have same problem in here https://github.com/beezee/djax/issues/27 i hope it will help ^^

after they stop working use somethink like that :)

/*! new page target blank */
$('body').on('click', 'a[target^=_blank], a[rel^=external], area[target^=_blank]', function(e) {  
    window.open($(this).attr('href'));
    return false;
});  

/*! page reload */
$('body').on('click', 'a[target^=pagereload], a[rel^=appendix], area[target^=pagereload]', function(e) { 
    window.location= $(this).attr('href');
    return false;
});

/*! page top */
$('body').on('click', 'a', function(e) {
    $(window).scrollTop(0);
    e.preventDefault();
}); 

[feifanzhou]

Thanks Beezee, looks like that works!