通过父显示内容的变化

Question

我在fieldset 中有 DHTML 内容。这包括纯 html、嵌套对象（甚至是其他字段集）以及 input、select 和 textarea 对象的值更改。

如果内容已更改，我想更改字段集的边框。 以下作品：

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

这处理输入；我可以将它扩展到选择和文本区域。

问题：

1. 如何对 html 更改执行相同的操作？
2. 是否可以通过比较当前的 html() 与存储的 html() 来完成所有这些更改跟踪？
3. 如果 (2) 为“是”，这会处理“撤消”的情况吗？

---

编辑：我有一个 ajax 上传内容并保存更改的按钮。然后我删除边框颜色

Answer 1

1.) 您可以采用与 jQuery livequery plugin 类似的方式跟踪 HTML 更改。 livequery 插件包装了所有的 jQuery DOM 操作方法，当它们中的任何一个被调用时，包装器方法会做一些特殊的事情，然后代理回原来的函数。这仅适用于更新/撤消用例，假设两者都使用 jQuery DOM 操作方法之一来更改状态。

$.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.) 你可以这样跟踪，似乎有点笨拙。如果没有关于您的用例和数据控制的更多信息，很难推荐任何东西。

3.) 如果您确实将原始 html() 的值存储在字段集中，它似乎也适用于撤消情况。您也可以在撤消后比较 html() 的值。但是，如果您正在创建一个“撤消”按钮，在我看来，您将需要有一些所有更改的历史记录，一旦用户没有更多撤消，那么他们应该回到原始状态并且不比较 html( ) 应该是必需的。