How to declare a document.on() listener to change text of specific selected elements using jQuery?

Question

I try to define my problem clearly using a use case, so here it is:

consider <a class="fruit" href=#>apple</a> and instead of apple could be any fruit. i want to declare a jQuery on listener like the one below that any time a dom element that has fruit class created and added any part of the body my listener do something to that element.

$(document).on("HERE IS THE QUESTION",".fruit",function(){ do something to the fruit here });

I know there are some alternative ways for reaching the result but this is how i want to solve this problem due to some complexity reasons.

This only needs to work in Chrome.

Answer 1

If you're trying to monitor when a DOM element with a certain class name is created and added to the DOM, then you can't do that using straight jQuery as there is no good cross browser (that works in older browsers) way of doing that and it isn't something jQuery has tried to solve.

There is a newish interface (requires IE 11) called mutation observers (MDN reference here) that can allow you to monitor for certain types of DOM changes where you could get an event when items are added to the DOM and you could check if they were your class. If you really only need it to work in Chrome, this should be just what you want.

There is also the old standby (that's bad for battery life) technique of using a setInterval() to check the DOM regularly for changes.

Or, you could also describe in more detail and from a higher level what problem you're really trying to solve and we might be able to offer other ideas.

Here's some sample code using mutation objservers:

$(document).ready(function() {
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            for (var i = 0; i < mutation.addedNodes.length; i++) {
                if (mutation.addedNodes[i].className === "fruit") {
                    console.log("found fruit", mutation.addedNodes[i]);
                }
            }
      });    
    });

    // configuration of the observer:
    var config = { childList: true, subTree: true };

    // pass in the target node, as well as the observer options
    observer.observe($("#container")[0], config);    
});

And, a working demo: http://jsfiddle.net/jfriend00/zxEXp/