Javascript 为更改的内容创建jQuery特殊事件

我试图创建一个jQuery特殊事件，当绑定的内容发生更改时触发该事件。我的方法是使用setInterval检查内容，并检查内容是否与上次更改。如果你有更好的方法，请告诉我。另一个问题是，我似乎无法清除间隔。无论如何，我需要的是用event.special检查内容更改的最佳方法

(function(){

    var interval;

    jQuery.event.special.contentchange = {
        setup: function(data, namespaces) {
            var $this = $(this);
            var $originalContent = $this.text();
            interval = setInterval(function(){
                if($originalContent != $this.text()) {
                    console.log('content changed');
                    $originalContent = $this.text();
                    jQuery.event.special.contentchange.handler();
                }
            },500);
        },
        teardown: function(namespaces){
            clearInterval(interval);
        },
        handler: function(namespaces) {
            jQuery.event.handle.apply(this, arguments)
        }
    };

})();

然后像这样绑起来：

$('#container').bind('contentchange', function() {
        console.log('contentchange triggered');
});

我得到了console.log“content changed”，但没有得到console.log“contentchange triggered”。很明显，回调从未被触发

我只是使用Firebug来更改内容，触发事件，并对其进行测试

更新
我想我说得不够清楚，我的代码实际上不起作用。我在寻找我做错了什么

下面是所有感兴趣的人的完成代码

感谢Mushex对我的帮助。

还请看一下James（声明为jquery对象方法，而不是事件）

创建特别活动

jQuery.fn.valuechange = function(fn) {
    return this.bind('valuechange', fn);
};

jQuery.event.special.valuechange = {

    setup: function() {

        jQuery(this).watch('value', function(){
            jQuery.event.handle.call(this, {type:'valuechange'});
        });

    },

    teardown: function() {
        jQuery(this).unwatch('value');
    }

};

无论如何，如果您只需要将其作为事件使用，那么您的脚本很好：）

我知道这个帖子/问题有点老了，但这些天我在一个类似的解决方案后面，我发现：

$('#selector').bind('DOMNodeInserted', function(e) {
    console.log(e.target);
});

资料来源：

---

希望这对别人有帮助

原始问题中完成的代码对我有用，谢谢！我只想指出，我使用的jquery 1.9.1和$.event.handle似乎已被删除。我更改了以下内容以使其正常工作

调用（self，{type:'contentchange'}）

到

---

jQuery.event.dispatch.call（self，{type:'contentchange}）

也许你可以试试看

代码如下：

mainArea = document.querySelector("#main_area");
MutationObserver = window.MutationObserver;
DocumentObserver = new MutationObserver(function() {
       //what you want to run
});

DocumentObserverConfig = {attributes: true, childList: true, characterData: true, subtree: true};

DocumentObserver.observe(mainArea, DocumentObserverConfig);

---

你为什么不在$this声明中使用'var'？你在真实页面中的'orginalContent'拼写是否一致？何时调用teardown？@David Andres-当我解开事件绑定时$（“#container”）.unbind（'contentchange'）；如果我没有弄错的话，这个实现将只保留最后一个计时器id。要修复它，我将执行类似$（this）.data（“onchange.timer.id”，interval）的操作，并在TearDown中检索。我要寻找的是如何创建一个特殊事件，就像我所做的那样，只有一个真正起作用的事件。你能给我看一下吗？我以为你解决了这个问题，把这个例子带给你，看看这个问题的不同方法。如果你的脚本还不能用，请告诉我。我的脚本不能用。如果你能帮我，那就太好了：）顺便说一句，谢谢你的另一种方法。谢谢：）很高兴知道我很接近。不值得投反对票。很多东西都不推荐使用，但在所有浏览器都提供更好的解决方案之前，它们仍然会被使用，理解它们仍然很有用。（+1抵消投票）整洁！一个更干净的计时器，即使它被弃用！不推荐使用，是的，但是有一个CSS3替代品。甚至IE最终也支持它（在版本11中）！

$('#selector').bind('DOMNodeInserted', function(e) {
    console.log(e.target);
});

mainArea = document.querySelector("#main_area");
MutationObserver = window.MutationObserver;
DocumentObserver = new MutationObserver(function() {
       //what you want to run
});

DocumentObserverConfig = {attributes: true, childList: true, characterData: true, subtree: true};

DocumentObserver.observe(mainArea, DocumentObserverConfig);