Displaying change of content through parent

Question

I have DHTML content inside a fieldset. This includes plain html, nested objects (even other fieldsets), and value change of input, select, and textarea objects.

I'd like to change the border of the fieldset if the contents have been changed. The following works:

$('fieldset[name=qsfs127]').children('input').change(function(){
    $(this).parent('fieldset').css({border:'1px solid red'});
})

This handles the input; I can extend it to select and textarea.

Questions:

1. How can I do the same for html changes?
2. Can all of this change-tracking be done by comparing current html() to stored one?
3. If yes for (2), will this handle cases of "undo"?

---

Edit: I have a button that ajax-uploads contents, and saves the changes. I then remove the border color

Answer 1

1.) You could track HTML changes in a similar way that the jQuery livequery plugin does. The livequery plugin wraps all of the jQuery DOM manipulation methods and when any of them are called, the wrapper method does something special and then proxies back to the original function. This will only work for the update/undo uses cases assuming the both use one of the jQuery DOM manipulation methods to change state.

$.each('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', function(i, funcName) {

   // Short-circuit if the method doesn't exist
   if (!$.fn[funcName]) return;

   // Save a reference to the original method
   var old = $.fn[funcName];

   // Create a new method
   $.fn[funcName] = function() {

      // Call the original method
      var r = old.apply(this, arguments);

      //Do something special here! Compare the stored html of the fieldset
      //to the new html state and update border accordingly

      // Return the original methods result
      return r;
   }
});

2.) You could keep track this way, seems a little heavy handed. Without more information about your use case and control of data it is hard to recommend anything.

3.) If you did store the value of the original html() in the fieldset it seems that it would work for the undo case as well. You could just compare the value of the html() after an undo as well. However if you are creating an "undo" button it seems to me that you will need to have some history of all changes, and once the user has no more undos then they should be back at the original state and no comparison of the html() should be needed.