html target table,jquery - HTML table onChange - Stack Overflow

onchange is designed for use with inputs like - so wont work in this context. There are specific dom related events you can use (like DOMSubtreeModified), but these aren't cross-browser and have varying implementations (they may even now be deprecated):

MutationEvents as mentioned above have seemingly been replaced by MutationObservers which I have not used yet myself... but sounds like it would do what you need:

setInterval

Other than that you can fallback to a setInterval handler that will listen for any change in the HTML within your target element... when it changes you fire a function.

function watch( targetElement, triggerFunction ){

/// store the original html to compare with later

var html = targetElement.innerHTML;

/// start our constant checking function

setInterval(function(){

/// compare the previous html with the current

if ( html != targetElement.innerHTML ) {

/// trigger our function when a change occurs

triggerFunction();

/// update html so that this doesn't keep triggering

html = targetElement.innerHTML;

}

},500);

}

function whenChangeHappens(){

alert('this will trigger when the html changes in my_target');

}

watch( document.getElementById('my_target'), whenChangeHappens );

jQuery Plugin

If you want to jQueryify the above into something you can apply to any element it would easy to modify:

/// set up the very simple jQuery plugin

(function($){

$.fn.domChange = function( whenChanged ){

/// we want to store our setInterval statically so that we

/// only use one for all the listeners we might create in a page

var _static = $.fn.domChange;

_static.calls = [];

_static.iid = setInterval( function(){

var i = _static.calls.length;

while ( i-- ) {

if ( _static.calls[i] ) {

_static.calls[i]();

}

}

}, 500 );

/// step each element in the jQuery collection and apply a

/// logic block that checks for the change in html

this.each (function(){

var target = $(this), html = target.html();

/// by adding the function to a list we can easily switch

/// in extra checks to the main setInterval function

_static.calls.push (function(){

if ( html != target.html() ) {

html = target.html();

whenChanged();

}

});

});

}

})(typeof jQuery != undefined && jQuery);

/// example code to test this

(function($){

$(function(){

$('div').domChange( function(){

alert('I was changed!');

} );

});

})(typeof jQuery != undefined && jQuery);

Obviously the above is a very simple version, it should be extended to handle adding and removing of listeners.