事件監聽器DOMNodeInserted被多次運行，爲什麼？

我正在嘗試偵聽某個類的某個節點被動態添加到DOM中。一旦添加了這個節點，我想要添加一個插件的實例到這個節點。我遇到的問題是DOMNodeInserted運行多次，然後在這一個節點上運行我的插件多個導致問題。事件監聽器DOMNodeInserted被多次運行，爲什麼？

該頁面上只有一次該類出現。

這是爲什麼，我該如何阻止這種情況發生？

$(document).ready(function(){ 

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

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

    }) 

});

來源

2014-03-05 Richard Skinner

您的插件是否將DOM節點添加到'.class'？注意到它們確實有泡沫。 – Bergi

可能： - （評論/鏈接留在改編自約翰·漢恩的smartresize）

試試這個。該事件會針對匹配元素（.class）觸發一次，每個後代觸發一次。

如果你的元素，你需要看的東西就像一個select與一羣在它之下option元素，一個快速和骯髒的解決辦法是看你能在DOM把與它一起另一個「哥們」的元素。例如：

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

然後在你標記你只需要與id="classbuddy"添加類似一個空的span元素。由於該跨度不包含子元素，因此您的代碼只會觸發一次，因此.plugin()只會應用一次。

來源

2014-06-03 16:24:20 hmqcnoesy

我在一段時間後遇到了同樣的問題。你需要做的是消除該功能，以便在最後一次DOMNodeInserted調用後觸發。因爲在你的DOM無論你留意元素有子元素

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

來源

2014-03-05 15:05:13 Ted

事件監聽器DOMNodeInserted被多次運行，爲什麼？

回答

相關問題