Создать специальное событие jQuery для измененного контента

Question

Я пытаюсь создать специальное событие 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 «Запущен контент-обмен». Таким образом, очевидно, что обратный вызов никогда не срабатывает.

Я просто использую 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 за помощь.

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 (self, {type: 'contentchange'});

до

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

Answer 4

возможно, вы можете попробовать 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);