绑定通过AJAX加载的内容

Question

We have a WordPress plugin, which dynamically - via AJAX calls - loads user specific content (html) to a page. However, WordPress theme and other plugin developers increasingly process(animation etc.) elements, using a combination of javascript and CSS, which exist in the DOM by document.ready() .

We don't have control over what they do or how they do it. If we did we'd insist on using .on() and .trigger() event delegation and packaging things up in functions.

Is there something that WE can do that ensures that all content introduced after document.ready() gets properly bound for clicks, animations etc?

Answer 1

Depending on your jquery version, you can handle delegated events (events for elements added after the first "on" method call) with either "delegate" (for jquery < 1.7) or "on" (for jquery >= 1.7) methods.

You have to use this form, though:

$(".containerElement").on( 'click' , '.clickableElement', function(e){
    //Do stuff
});

Delegate function has the same arguments.

More info on events and event delegation on:

http://api.jquery.com/on/