事件监听器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',
        });
    })
});

然后在您的标记中，您只需要添加类似空的 span 元素的内容id="classbuddy"。因为该跨度不会有子元素，所以您的代码只会触发一次，因此.plugin()只会应用一次。