onclick事件不會觸發或沒有訂閱與循環中的按鈕

我想要獲取按鈕的單擊事件數組訂閱，然後通過從屬性拉位置重定向。我有麻煩得到這個工作，現在它已經歸結爲以下...onclick事件不會觸發或沒有訂閱與循環中的按鈕

function pushButton() { 
    window.alert('Hello World'); 
} 

var listButtons = document.getElementsByClassName('btn'); 

for (var i = 0; i < listButtons.length; i++) { 
    listButtons[i].addEventListener('click', pushButton, false); 
}

這是在腳本標記在頁面底部（按鈕已被宣佈之後）。

我也試過......

... 
for (var i = 0; i < listButtons.length; i++) 
    listButtons[i].onclick = function(i) { 
     return function() { 
      alert('Hello World'); 
     } 
    }(i); 
}

和...

... 
(function(i) { 
    listButtons[i].onclick = (function() { 
     window.alert('Hello World'); 
})})(i);

基礎上，我看到周圍的其他例子。問題是，單擊按鈕時沒有任何反應。我在Chrome中使用開發人員視圖來查找錯誤，但沒有顯示任何錯誤。我也試過在Firefox和IE中無濟於事。

我確實有幾個例子會使用onclick來觸發所有事件，並且我知道這是由於訂閱時觸發了事件。但即使在那之後，按鈕也不會做任何事情。我正在使用onclick，但現在我已經轉移到addEventListener，它沒有不同的結果。

我試圖避免jQuery，只使用香草的JavaScript。

來源

2014-07-08 SLaG

您是否試圖在初始化後檢查'listButtons'的值，並驗證它包含您期望的元素？ – Gian

@Gian - 是的，我有回來所有的項目。計數也是正確的。目前大約有18個按鈕。 – SLaG

您最小的示例對我來說按預期工作。接下來我會嘗試驗證偵聽器是否實際上已連接到按鈕（使用Chrome開發人員窗格）。 – Gian

爲了消除所有可能的原因，我開始刪除所有javascript函數和事件以縮小範圍。

事實證明，問題是由正在onload事件中調用的函數引起的。該函數通過操作包含div的innerHTML來改變按鈕的位置。當innerHTML被重寫時，它會銷燬所有的事件監聽器。

這導致沒有事件偵聽器，也沒有看到錯誤症狀。一旦onload事件被修改以再次添加事件偵聽器，原始代碼就可以正常工作。

來源

2014-07-08 04:04:10 SLaG

我試圖複製你的第一個代碼示例，並得到它像這樣工作：

function pushButton() { 
    alert('Hello World'); 
} 

listButtons = document.getElementsByClassName('btn') 

for (var i = 0; i < listButtons.length; i++) { 
    listButtons[i].addEventListener('click', pushButton); 
}

來源

2014-07-08 03:39:33

謝謝。原因在於我沒有按照我的答案寫的一些代碼。感謝您幫助我減少對我寫的內容的興趣。 – SLaG

如果包括了車身前，JavaScript的（在頭）將無法正常工作。綁定發生在DOM準備好之前。

如果您在頁面底部將JavaScript放在它的前面，

解決此另一個工作是使用jQuery文檔準備好我的電腦上

$(document).ready(function(){ 
    $('.btn').on('click',function(){ 
     alert('Hellow World'); 
    }); 

});

來源

2014-07-08 03:44:20

根據我的問題，代碼是在體內，我想避免jQuery。不過謝謝。 – SLaG

代碼做工精細，fllow是我的代碼。

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title></title> 
    </head> 
    <body> 
     <div> 
     <input type="submit" class="btn" value="btn1"></input> 
     <form> 
      <input type="text"></input> 
      <input type="text"></input> 
      <input type="submit" class="btn" value="btn2"></input> 
      <input type="submit" class="btn" value="btn3"></input> 
     </form> 
     </div> 
    </body> 
    <script type='text/javascript'> 
     function pushButton() { 
      window.alert('Hello World'); 
     } 

     var listButtons = document.getElementsByClassName('btn'); 

     for (var i = 0; i < listButtons.length; i++) { 
      listButtons[i].addEventListener('click', pushButton, false); 
     } 
    </script> 
</html>

來源

2014-07-08 03:53:35 jediliang

原因在於此片段後正在執行的另一段代碼。感謝您花時間證明我的代碼應該已經工作。 – SLaG

onclick事件不會觸發或沒有訂閱與循環中的按鈕

回答

相關問題