如何使用 jquery 创建自定义事件答案

【问题标题】：How can I create a custom event using jquery如何使用 jquery 创建自定义事件
【发布时间】：2012-02-05 08:29:09
【问题描述】：

我想创建一个事件，当一个div的内容发生变化时，该事件被调用..

change = function(oldval,newval){
    if (oldval != newval){
        return true;
    }
    return false;
}

我希望每次 div 的内容发生变化时都调用此函数。知道如何实现这一点吗？

【问题讨论】：

DOM Mutation event in JQuery or vanilla Javascript 的可能重复项。那里的一些答案链接到可能解决您的问题的 jQuery 插件。不过，处理 DOM 突变事件通常比看起来要复杂。

标签： javascript jquery events

【解决方案1】：

我希望每次元素内容发生变化时调用此函数

如果元素的内容等于表单输入的值：

一行代码：

$(':input', $('#divId')).change(function(){alert('changed');});

或者动态添加元素的委托选项（还是一行... (; ):

$('#divId').on('change', ':input', function(){ alert('changed');});

文档：

【讨论】：

为什么这会得到支持？当<div> 的内容发生变化时，它不会引发事件，但是当其中的表单控件的值发生变化时，这根本不是一回事。最后一句甚至都不完整……
@FrédéricHamidi。我确定这就是qustion所有者的意思。 “元素内容变化”
确实，content of a div changes，而不是value of form controls inside a div changes。恐怕提问者正在寻找前者（突变事件），而不是后者......
@FrédéricHamidi。我们将等待问题所有者的回应......无论如何这是一个很好的答案，问题还不够清楚。
@FrédéricHamidi。 “元素的内容发生变化”而不是“div 的内容发生变化”！

【解决方案2】：

如果你不打算支持 IE，你可以使用 DOMNodeInserted 和 DOMNodeRemoved 来检查是否在你的 div 中添加或删除元素。

$('#yourDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event, oldvalue, newvalue) {
   if (oldval != newval){
        return true;
    }
    return false;
});

对于 IE 支持，您可以使用

$(function() {
  var $div = $("#yourDiv");
  var content = $div.html();
  var look = setInterval(function() {
    var newcontent = $div.html();
    if (html != newcontent ) {
      change(content, newcontent); 
      content = newcontent;
    }
  },100);

  function change(oldval, newval() {
     if (oldval != newval){
        return true;
    }
    return false;
  }
});

【讨论】：

oldvalue, newvalue 值从何而来？！