Créer un événement spécial jQuery pour le contenu modifié

Je suis en train de créer un jQuery événement spécial qui se déclenche lorsque le contenu qui est lié, les changements. Ma méthode est de vérifier le contenu avec un setInterval et de vérifier si le contenu a changé depuis la dernière fois. Si vous avez une meilleure méthode de le faire, faites le moi savoir. Un autre problème est que je n'arrive pas à effacer l'intervalle. De toute façon, ce dont j'ai besoin est la meilleure façon de vérifier le contenu des modifications à l'événement.spécial.

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

})();

Et lier de cette façon:

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

- Je obtenir de la console.le journal 'le contenu a changé, mais pas à la console.le journal 'contentchange déclenché". Il est donc évident que le rappel n'est jamais déclenché.

Je viens d'utiliser Firebug pour modifier le contenu et de déclencher l'événement, d'en faire l'essai.

mise à Jour
Je ne pense pas que j'ai fait ce assez clair, mon code ne fonctionne pas réellement. Je suis à la recherche de ce que je fais mal.

Voici le code terminé pour quiconque s'intéresse

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

})();

Grâce à Mushex pour m'aider.

source d'informationauteur Sindre Sorhus

  1. 7

    également prendre un coup d'oeil à James un script similaire (déclarant que jquery méthode de l'objet et non pas comme des cas)

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

};

    et la création d'événements spéciaux

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

};

    De toute façon, si vous en avez besoin seulement d'un événement, vous script est sympa 🙂

  2. 4


    Je sais que ce post/la question est un peu vieux, mais ces jours-ci, j'étais derrière une solution similaire et j'ai trouvé ceci:

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

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

    Espère que cela aide quelqu'un!

  3. 1

    Le code terminé dans la question d'origine a fonctionné pour moi, merci! Je voudrais juste signaler que je suis à l'aide de jquery 1.9.1 et $.de l'événement.poignée semble avoir été retiré. J'ai changé le suivant pour le faire fonctionner.

    jQuery.de l'événement.poignée de.appel(auto, {type:'contentchange'});

    à

    jQuery.de l'événement.de l'expédition.appel(auto, {type:'contentchange'});

  4. 0

    peut-être que vous pourriez essayer de Mutation Observateur

    Voici le code:

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