0

I have a function from icomoon that runs when the window loads (see below).

I would like to change it so that the function gets called once when the document loads, and then if there are any subsequent changes to the body - eg: from js/ajax (and preferably then only on the changed part of the dom, so as not to loop through the entire document again and again). Any suggestions on what jquery on events I should use for this, and then to only check the changes once the first execution on the entire document has been completed? Needs to be Ie7+ compatible too.

Thanks much.

$( window ).load(function() {
function addIcon(el, entity) {
    $(el).addClass("iconed");
    var html = el.innerHTML;
    el.innerHTML = '<span style="font-family: \'icomoon\'">' + entity + '</span>' + html;
}
var icons = {
        .....
    };

    function iconify() {

        var els = document.getElementsByTagName('*'),
            i, attr, c, el;
        for (i = 0; ; i += 1) {
            el = els[i];
            if(!el) {
                break;
            }
            attr = el.getAttribute('data-icon');
            if (attr) {
                if (!$(el).hasClass("iconed")) {
                    addIcon(el, attr);
                }
            }
            c = el.className;
            c = c.match(/icon-[^\s'"]+/);
            if (c && icons[c[0]]) {
                if (!$(el).hasClass("iconed")) {
                    addIcon(el, icons[c[0]]);
                }
            }
        }
    }
    iconify();
    $('body').on("contentchanged", function() { //some event that triggers ONCE the document has fully loaded, and is triggered when the DOM changes..
        iconify(); //would prefer if this function only checked the modified part of the DOM - rather than the entire DOM each time (except on the 1st execution - when window loaded.
    });
 });
Martin
  • 795
  • 1
  • 12
  • 31

1 Answers1

0

You can fire custom events when the content of body is changed by ajax or any other function which you are aware of . And then bind a custom function to that event.

Let's say in

function addIcon(el, entity) { $(el).addClass("iconed"); var html = el.innerHTML; el.innerHTML = '<span style="font-family: \'icomoon\'">' + entity + '</span>' + html; $(document).trigger('contentchanged'); }

And then you can write a custom function handling this event like:

$(document).on('contentchange','selector',function(){

//Your code goes here.
});

You can also refer for DOM mutation events

K K
  • 17,794
  • 4
  • 30
  • 39
  • Thanks for your time. I will update the question with the code I currently have. I would prefer to have (if possible) an event that triggers when the DOM changes (eg [not correct I know]: $('body').on('change', function... ) and then runs the function on ONLY on the changed part of the DOM. – Martin Apr 20 '14 at 14:18
  • I think this will help you :http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener – K K Apr 20 '14 at 14:23
  • Thanks .... had seen than before, doesn't seem to work in IE7 (DOMSubtreeModified). – Martin Apr 20 '14 at 14:28
  • Okay, in that case, you might have to use custom events as mentioned in the answer or maybe you can try searching more on SO. – K K Apr 20 '14 at 14:30