创建内容改变了jQuery的特殊事件(Create a jQuery special event f

我试图创建时所绑定的内容触发一个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“内容变”，但不是的console.log“contentchange触发”。 所以很明显，回调是永远不会触发。

我只是用萤火虫来改变内容，并触发事件，来测试它。

更新
我不认为我做了这个很清楚，我的代码不实际工作。 我在寻找我做错了什么。

下面是兴趣的人完成的代码

(function(){

    var interval;

    jQuery.event.special.contentchange = {
        setup: function(){
            var self = this,
            $this = $(this),
            $originalContent = $this.text();
            interval = setInterval(function(){
                if($originalContent != $this.text()) {
                    $originalContent = $this.text();
                    jQuery.event.handle.call(self, {type:'contentchange'});
                }
            },100);
        },
        teardown: function(){
            clearInterval(interval);
        }
    };

})();

由于Mushex帮了我。

Answer 1:

也看看詹姆斯类似的脚本 （声明为jQuery对象方法而不是事件）

jQuery.fn.watch = function( id, fn ) {

    return this.each(function(){

        var self = this;

        var oldVal = self[id];
        $(self).data(
            'watch_timer',
            setInterval(function(){
                if (self[id] !== oldVal) {
                    fn.call(self, id, oldVal, self[id]);
                    oldVal = self[id];
                }
            }, 100)
        );

    });

    return self;
};

jQuery.fn.unwatch = function( id ) {

    return this.each(function(){
        clearInterval( $(this).data('watch_timer') );
    });

};

并建立特殊事件

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');
    }

};

无论如何，如果你需要它只是作为事件，你的脚本是不错的:)

Answer 2:

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

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

来源： http://naspinski.net/post/Monitoring-a-DOM-Element-for-Modification-with-jQuery.aspx

希望这帮助别人！

Answer 3:

在原来的问题完成的代码为我工作，谢谢！ 我只是想指出，我使用jQuery 1.9.1和$ .event.handle似乎已被删除。 我改变了以下才能正常工作。

jQuery.event.handle.call（个体，{类型： 'contentchange'}）;

至

jQuery.event.dispatch.call（个体，{类型： 'contentchange'}）;

Answer 4:

也许你可以尝试变异观察

下面是代码：

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);

文章来源: Create a jQuery special event for content changed