javascript - Event listener DOMNodeInserted being run multiple times, why? - Stack Overflow

admin管理员组

文章数量:1345192

I'm trying to listen for a node with a certain class being added to the DOM dynamically. Once this Node has been added i want to then add an instance of of a plugin to this Node. The problem I'm having is DOMNodeInserted is running multiple times which is then running my plugin multiple on this one Node which is causing problems.

There is only ever one occurrence of this class on page.

Why is this and how can I stop this from happening?

$(document).ready(function(){
    
    $('#editArea').live('DOMNodeInserted', '.class', function(e){

        $('.class').plugin({
            source: 'libs/ajax/somescript.php',
        });
                    
    })
    
});

I'm trying to listen for a node with a certain class being added to the DOM dynamically. Once this Node has been added i want to then add an instance of of a plugin to this Node. The problem I'm having is DOMNodeInserted is running multiple times which is then running my plugin multiple on this one Node which is causing problems.

There is only ever one occurrence of this class on page.

Why is this and how can I stop this from happening?

$(document).ready(function(){
    
    $('#editArea').live('DOMNodeInserted', '.class', function(e){

        $('.class').plugin({
            source: 'libs/ajax/somescript.php',
        });
                    
    })
    
});

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Sep 20, 2022 at 21:47 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 5, 2014 at 14:53 Richard SkinnerRichard Skinner 73833 gold badges1010 silver badges2626 bronze badges 1

• Is your plugin adding DOM nodes to the .class? Notice that they do bubble. – Bergi Commented Mar 5, 2014 at 15:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I ran into the same problem awhile back. What you need to do is debounce the function so it fires after the last DOMNodeInserted call.

Try this (adapted from John Hann's smartresize--ment/link left in):

(function ($, sr) {
        // debouncing function from John Hann
        // http://unscriptable./index.php/2009/03/20/debouncing-javascript-methods/
        var debounce = function (func, threshold, execAsap) {
            var timeout;
            return function debounced() {
                var obj = this, args = arguments;
                function delayed() {
                    if (!execAsap)
                        func.apply(obj, args);
                    timeout = null;
                };
                if (timeout) {clearTimeout(timeout);
                } else if (execAsap) {func.apply(obj, args);}
                timeout = setTimeout(delayed, threshold || 100);
            };
        }
        jQuery.fn[sr] = function (fn) { return fn ? this.on('DOMNodeInserted', debounce(fn)) : this.trigger(sr); };
    })(jQuery, 'debouncedDNI');

    $(document).ready(function () {
        $('#editArea').debouncedDNI(function () {
            $('.class').plugin({
                source: 'libs/ajax/somescript.php',
            });
        });
    });

Probably because in your DOM whatever the element you're watching for has children elements. The event is fired once for the matching element (.class) and once for each descendant.

If your element you need to watch is something like a select with a bunch of option elements under it, a quick and dirty solution might be to watch for another "buddy" element you can put along with it in the DOM. For instance:

$(document).ready(function(){
    $('#editArea').on('DOMNodeInserted', '#classbuddy', function(e){
        $('.class').plugin({
            source: 'libs/ajax/somescript.php',
        });
    })
});

Then in your markup you would just need to add something like an empty span element with id="classbuddy". Because that span would not have children elements, your code would fire only once and so .plugin() would be applied one time only.

本文标签： javascriptEvent listener DOMNodeInserted being run multiple timeswhyStack Overflow