Create a jQuery special event for content changed

Question

I'm trying to create a jQuery special event that triggers when the content that is bound, changes. My method is checking the content with a setInterval and check if the content has changed from last time. If you have any better method of doing that, let me know. Another problem is that I can't seem to clear the interval. Anyway, what I need is the best way to check for content changes with the 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)
        }
    };
    
})();

And bind it like this:

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

I get the console.log 'content changed', but not the console.log 'contentchange triggered'. So it's obvious that the callback is never triggered.

I just use Firebug to change the content and to trigger the event, to test it out.

Update
I don't think I made this clear enough, my code doesn't actually work. I'm looking for what I'm doing wrong.

Here is the finished code for anyone interested

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

Thanks to Mushex for helping me out.

And do you have consistent spelling of 'orginalContent' in the *real* page? — meder omuraliev, Sep 19 '09 at 22:29
@David Andres - when I unbind the event. $('#container').unbind('contentchange'); — Sindre Sorhus, Sep 19 '09 at 22:43
If I'm not mistaken this implementation will only keep the last timer id. to fix it I would do something like $(this).data("onchange.timer.id",interval) and retrieve in the teardown — Asaf, Sep 21 '11 at 14:53
Your "finished" code logic has a major **BUG** since each time `.on("contentchange"..` is binded, it will override the general `interval` variable, which would hinder other `contentchange` event which might have been binded previously... been **8** years, you can fix it to work better :) — vsync, Mar 19 '17 at 13:11

score 7 · Accepted Answer · answered Sep 19 '09 at 23:05

also take a look to James similar script (declaring as jquery object method and not as event)

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

};

and creating special event

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

};

Anyway, if you need it only as event, you script is nice :)

What I'm looking for is how to just create a special event, like I have done, only one that actualy works. Can you show me that? — Sindre Sorhus, Sep 20 '09 at 09:24
I thought you solved it and just bring this example to you to see a little different approach to this problem. If your script actually doesn't work yet, let me know. — Mushegh A., Sep 20 '09 at 10:17
My script doesn't work. Would be great if you could help me make it work :) And by the way, thanks for the other approach. — Sindre Sorhus, Sep 20 '09 at 13:21

score 4 · Answer 2 · answered Oct 06 '11 at 18:52

4

I know this post/question is a little old, but these days I was behind a similar solution and I found this:

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

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

Hope this help someone!

answered Oct 06 '11 at 18:52

Matheus

73
1
1

1

Hardly worth a downvote. Many things are deprecated, but until ALL browsers offer a better solution, they'll still be used, and it is still useful to understand. (+1 offset vote here) – mkoistinen Jan 06 '13 at 20:33
neat ! A lot cleaner that a timer even if it's deprecated ! – TCHdvlp Sep 30 '14 at 15:08
Deprecated, yes, but there's a CSS3 replacement. http://stackoverflow.com/a/25256569/1450294 Even IE finally supports it (in version 11)! http://caniuse.com/#feat=mutationobserver – Michael Scheper Aug 18 '15 at 20:34

score 1 · Answer 3 · answered Jul 17 '13 at 13:06

The finished code in the original question worked for me, thank you! I would just like to note that I am using jquery 1.9.1 and $.event.handle seems to have been removed. I changed the following to get it to work.

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

to

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

score 0 · Answer 4 · answered Aug 12 '14 at 05:11

maybe you could try Mutation Observer

Here are the 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);

Create a jQuery special event for content changed

4 Answers4

Linked