15

バインドされているコンテンツが変更されたときにトリガーされる jQuery の特別なイベントを作成しようとしています。私の方法は、内容を asetIntervalで確認し、内容が前回から変更されているかどうかを確認します。それを行うためのより良い方法があれば、私に知らせてください。別の問題は、間隔をクリアできないように見えることです。とにかく、私が必要としているのは、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 に答える