JavaScript Function on Injected Content

Question

So something I'm curious about, how the YUI3 PJAX works. For instance, when used, even if you inject an anchor into the page with the yui3-pjax class and click it - that will run the AJAX function.

My question is does that use a Promise or what to determine if the anchor, including injected anchors, has the class?

I have a function for observing mutations for a site and I call it on the click event for the yui3-pjax anchors already existing in the page, but I also want to have it run on yui3-pjax anchors that I dynamically load into the page without having to recall the function.

Answer 1

Using jQuery for the ease of sample code, a similar solution can be written in vanilla Javascript as well.

You can use .on() with a selector parameter. For example:

$('body').on('click', '.class', function(e) {
    e.stopPropagation(); //Stop multiple possible triggers from the same click
    //TODO: Rest of code
});

The downside obviously being that every click on your highest common ancestor will get processed. The upside is however that since the click is caught there (not on the elements themselves) you don't have to worry about rebinding events.