Utwórz specjalne Zdarzenie jQuery dla zmienionej zawartości

Próbuję utworzyć specjalne Zdarzenie jQuery, które uruchamia się, gdy zawartość, która jest związana, zmienia się. Moją metodą jest sprawdzenie zawartości za pomocą setInterval i sprawdzenie, czy zawartość zmieniła się od ostatniego razu. Jeśli masz na to lepszy sposób, daj mi znać. Innym problemem jest to, że nie mogę usunąć odstępu. W każdym razie, to, czego potrzebuję, to najlepszy sposób, aby sprawdzić zmiany treści w wydarzeniu.wyjątkowy.

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

})();

I zwiąż to tak: 

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

I get the konsola.log "zawartość zmieniona", ale nie konsola.log "contentchange Trigger". Więc to oczywiste, że oddzwanianie nigdy nie jest wyzwalane.

Po prostu używam Firebug do zmiany zawartości i wyzwalania zdarzenia, aby go przetestować.

Update
Chyba nie wyraziłem się wystarczająco jasno, mój kod nie działa. Szukam tego, co robię źle.


Oto gotowy kod dla wszystkich zainteresowanych 

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

})();
Dzięki Mushexowi za pomoc.
Author: Sindre Sorhus, 2009-09-20
Source

4 answers

Spójrz również na James podobny skrypt (deklarowanie jako metoda obiektu jquery, a nie jako zdarzenie) 

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

};

I tworzenie specjalnego zdarzenia 

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

};

W każdym razie, jeśli potrzebujesz go tylko jako wydarzenie, skrypt jest ładny:)

 7
Author: Mushex Antaranian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-19 23:05:01


Wiem, że ten post / pytanie jest trochę stary, ale w dzisiejszych czasach byłem za podobnym rozwiązaniem i znalazłem to: {]} 

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

Źródło: http://naspinski.net/post/Monitoring-a-DOM-Element-for-Modification-with-jQuery.aspx

Mam nadzieję, że to komuś pomoże!

 4
Author: Matheus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-06 18:52:57

Gotowy kod w oryginalnym pytaniu zadziałał dla mnie, dziękuję! Chciałbym tylko zauważyć, że używam jquery 1.9.1 i $.wydarzenie.uchwyt został usunięty. Zmieniłem następujące, aby to działało.

JQuery.wydarzenie.uchwyt.call (self, {type: 'contentchange'});

Do

JQuery.wydarzenie.centrala.call (self, {type: 'contentchange'});

 1
Author: tessa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-17 13:06:23

Może mógłbyś spróbować Mutation Observer

Oto kod: 

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);
 0
Author: Losses Don,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-12 05:11:32