jQuery "modify" event

Question

So I recently took a closer look at JavaScript and jQuery and after that stumbled over the Firefox extension called Greasemonkey.

Well, let me explain what I mean with the "modifiy"-event: I've got 2-3 userscripts for a certain page installed which automatically look if the page has changed in any way and if it has, they load the new content and append it to the already loaded page (they modify the DOM).

So basically, my userscript needs to know when that happens but I don't know how I should do that. Are there any jQuery events for that? Help would be appreciated.

Answer 1

With jQuery events if you want the event to apply to new elements you would use the .live method, however jQuery 1.3 doesn't support blur, focus, mouseenter, mouseleave, change, or submit events as live events, and it's change that you will want to use. (change, submit, and blur/focus are on the roadmap for jQuery 1.4)

As an alternative you could use the liveQuery plugin.

Answer 2

var orig;

$(function(){
     orig = getContent();
})

function watchContent() {
     var mod = getContent();
     if (mod != orig){ resetContent(orig); }
     setTimeout(watchContent,1000)
}

function resetContent(html) {
  $("body").append( html );
}

function getContent() {
    return $("body").html();
}