15

我正在尝试创建一个 jQuery 特殊事件，该事件在绑定的内容发生更改时触发。我的方法是用 a 检查内容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触发”。所以很明显，回调永远不会被触发。

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

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


这是任何有兴趣的人的完成代码

(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 帮助我。

4

4 回答 4

7

还可以看看 James类似的脚本（声明为 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');
    }

};

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

于 2009-09-19T23:05:01.320 回答
4


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

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

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

希望这对某人有帮助！

于 2011-10-06T18:52:57.150 回答
1

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

jQuery.event.handle.call(self, {type:'contentchange'});

到

jQuery.event.dispatch.call(self, {type:'contentchange'});

于 2013-07-17T13:06:23.093 回答
0

也许你可以试试 Mutation Observer

这是代码：

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);
于 2014-08-12T05:11:32.773 回答