Question

<span id="one"> one </span>
<span id="two"> two </span>


$("#one").mouseover(function(){
   $(this).css('background-color', 'red');
});

$("#two").click(function(){
   $(this).css('background-color', 'green');
});


    if (any changes on the site) {
        alert('changes detected');
    }

how can i detected any changes on the page? is this possible? i would like use function .live(), but how?

i dont want check separately each function on page.

LIVE: http://jsfiddle.net/d4PMB/1/

Answer 1

You could use window.setTimeout(), capture the current HTML of the body (document.body.innerHTML) and compare it with the previous saved HTML:

var lastBodyHTML = "";
var changes = 0;

function test() {
    if (lastBodyHTML == "") {
        lastBodyHTML = document.body.innerHTML;
    }

    if (lastBodyHTML != document.body.innerHTML) {
        changes++;
        alert("CHANGE #" + changes);
        lastBodyHTML = document.body.innerHTML;
    }
    window.setTimeout(test, 1000);

};

test();

Working example: http://jsfiddle.net/d4PMB/7/