事件監聽器DOMNodeInserted被多次運行，為什么？

Question

我正在嘗試監聽一個節點，其中某個類被動態地添加到DOM中。 添加此節點后，我想向此節點添加插件的實例。 我遇到的問題是DOMNodeInserted多次運行，然后在這個節點上運行我的插件多次導致問題。

頁面上只出現過一次此類。

這是為什么我怎么能阻止這種情況發生？

    $(document).ready(function(){

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

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

    })

});

Answer 1

我曾經遇到過同樣的問題。 您需要做的是去除函數，以便在最后一次DOMNodeInserted調用后觸發它。

試試這個（改編自John Hann的smartresize - 留下評論/鏈接）：

(function ($, sr) {
        // debouncing function from John Hann
        // http://unscriptable.com/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',
            });
        });
    });

Answer 2

可能是因為在您的DOM中，您正在觀看的任何元素都有子元素。 事件將針對匹配元素（ .class ）觸發一次，針對每個后代觸發一次。

如果您需要觀察的元素類似於select元素，其中包含一堆option元素，那么快速而骯臟的解決方案可能是觀察另一個可以在DOM中放置的“伙伴”元素。 例如：

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

然后在你的標記中你只需要添加一個像id="classbuddy"的空span元素。 因為該跨度不具有子元素，所以您的代碼只會觸發一次，因此.plugin()將僅應用一次。