JQuery effect selector now and in the future WITHOUT event

Question

Here is an example of using what I'm trying to do:

$('img.switchToPng').each(function(){ currentSRC = $(this).attr('src'); $(this).attr('src', currentSRC.substr(0, currentSRC.length -3) + 'png'); }); 

Later, using ajax in dom, a new <img src="path/image.jpg" alt="blah" class="switchToPng" /> will appear, I would like this to NOT require re-enabling the selector and each function. With .on selectors in jQuery may live in the future, however I cannot find a way to use it without an event. I could use the 'load' event, but that would not be reliable, as the browser cache could interfere with shelling.

If possible, I see many uses. Does anyone know a good answer to this question?

Answer 1

You have three options:

• Poll to create new items. ^[Example]

• Changing methods (jQuery) that insert a new element:

   var originalAppend = jQuery.fn.append; jQuery.fn.append = function() { // Function logic... return originalAppend.apply(this, Array.prototype.slice.call(arguments)); }; 

• Using obsolete DOM mutation methods .