`onclick`不會爲新追加的項目

我的代碼的重要組成部分的工作：`onclick`不會爲新追加的項目

window.onload = function(){ 
    function someFunction(){ 
     [].forEach.call(
      document.querySelectorAll('.button'), 
      function(btn){ 
       btn.onclick = console.log("I BEEN CLICKED!!"); 
      } 
     ); 
    } 

    someFunction() 

};

someFunction的console.log版畫‘我被點擊’點擊即在加載時存在的每個.button時。

我該如何擴展這個功能以適用於新添加的.button元素，這些元素稍後會使用普通JavaScript（無jQuery）添加？

來源

2015-01-31 Generic_User_ID

您可以使用事件委派。 – elclanrs 2015-01-31 21:52:55

事件不會被添加到未來的元素，只有您到目前爲止查詢過的元素。你應該用事件委派：

document.addEventListener('click', function(e) { 
    if (e.target.matches('.button')) { 
    console.log('I have been clicked') 
    } 
})

這將與未來的按鈕的工作，因爲你是在拍攝整個文檔點擊，但只有當事件被點擊了.button選擇相匹配的目標觸發響應。

在一些老的瀏覽器中matches是前綴，但你可以grab a polyfill。

來源

2015-01-31 21:57:50 elclanrs

@BhojendraNepal，看看編輯是否有幫助，也請查看本教程http://davidwalsh.name/event-delegate – elclanrs 2015-01-31 22:06:43

謝謝。只要知道它與您的更新'..完整的文件... – 2015-01-31 22:07:22

重要的是要注意，這可能會導致事件執行順序方面的一些意外。 – 2015-01-31 22:20:29

當您使用querySelectorAll時，您將獲得具有按鈕類的當前元素列表併爲其添加事件。當您添加新元素時，它們不會自動獲取事件偵聽器。無論何時追加，您都必須重新運行該功能，或者只需將相同的事件添加到附加項目。

來源

2015-01-31 21:52:02

-1

正如@EvanMosseri所說，只要添加一個新按鈕，您就可以簡單地手動調用它。但是，這是瘸腿的，所以這樣做：

document.body.addEventListener('DOMNodeInserted',function(){ 
    someFunction(); 
}

，並把所有你window.onload處理器中

編輯：@ elclanrs的方法可能是比這更好的，但這種方式應該還是工作，所以我會離開它在這裏

來源

2015-01-31 21:57:24 Markasoftware

這真的是效率低下，並且會在不設置'on *'時多次添加事件監聽器。 – Ryan 2015-01-31 22:00:22

@minitech是的，它效率低下，但不應該添加多個監聽器，因爲他使用'.onclick'，並且設置會在不設置'on *'「時刪除之前的所有值 – Markasoftware 2015-01-31 22:02:04

」。重點在於它有一個隱藏的陷阱 - 稍後'*上的許多'成爲'addEventListener'。 – Ryan 2015-01-31 22:02:48

`onclick`不會爲新追加的項目

回答

相關問題