Question

I need to know when the content of a DOM node changes. Luckily, I can be sure that all these changes will happen by a call to .text(val) or .html(val).

Is it possible to make jQuery send events when these two functions are called?

Answer 1

jsFiddle DEMO

You could overload the .text() (or any jQuery method) like so, and save anything that has been changed in a logging Class we can make. Here’s the basic class below.

var textLogger = new (function textChangeLog () {  
  this.logArray = [];

  this.add = function (item) {
    this.logArray.push(item);
  };

  this.displayLog = function (index) {
    if (typeof index === 'number') { console.log( this.logArray[index] ); }
    else { console.log( this.logArray ); }
  };
})();

Now we override the current .text() and add our few additions. The logging class, and a callback function (in case you wanted more functionality)

$.fn.oldText = $.fn.text; 
// ** NOTE: At any point you can just use $('body').oldText('change it');
// to by pass any of the below changes / overrides to .text()

$.fn.text = function (str, funcEvent) {
  try {
    // Let's log anything that's being changed in our textLogger class Array
    textLogger.add($(this));

    // call the original .text()
    $(this).oldText(str); 

    // the optional event you passed in
    var callbackFunc = typeof funcEvent !== 'undefined' ? funcEvent : function () { };
    callbackFunc(); 
  }
  catch(e) { console.log(e); }
};

Now we do some example useage, and then we do textLogger.displayLog() to see our results in the console. You’ll see the entire jQuery selector / context / IDs in there, in an Array.

$('div').text('here');
$('#anotherExample').text('we changed this too!');

textLogger.displayLog();

$('#cbTest').text('blah', function () { console.log('callback!'); });

EDIT Updated the jsFiddle to show how to trigger / respond to a custom event when a text changes.