在div中添加2個按鈕時，只有第二個按鈕工作

使用greasemonkey添加這兩個按鈕。我試過顛倒了順序，它總是第二個添加的按鈕可以工作。另一個按鈕不會觸發onclick事件。在div中添加2個按鈕時，只有第二個按鈕工作

// Add the click to chat button 
mydiv    = document.getElementById("optionalJobinfoData"); 
var btn   = document.createElement("input"); 
btn.type   = 'button'; 
btn.value   = 'Click to Chat'; 
btn.onclick  = function() { window.open(chatURL); }; 
mydiv.innerHTML += "<i>Notify Dispatch</i><br><i>(stuck on job)</i>&nbsp;&nbsp;"; 
mydiv.appendChild(btn); 

// Credentials button 
mydiv    = document.getElementById("optionalJobinfoData"); 
btn    = document.createElement("input"); 
btn.type   = 'button'; 
btn.value   = 'Credentials'; 
btn.onclick  = function() { window.open(credsURL); }; 
mydiv.innerHTML += "<br><br><i>DSL Credentials</i> "; 
mydiv.appendChild(btn);

來源

2013-02-08 Cameron Darlington

'element.onclick'很難工作，請改用'addEventListener（）'。請檢查[這篇文章]（http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Getting_Started#Pitfall_.232:_Event_Handlers） – Teemu 2013-02-08 18:28:57

@Teemu，你是正確的（也onclick是*任何*情況），但不幸的是，它會在Greasemonkey 1.0或更高版本中有時*工作。直到沙箱模式改變並且腳本中斷。在使用者案例中，這是「定時炸彈」編碼的一個例子。它似乎很好，但最終它會讓你受益。 – 2013-02-08 22:15:39

@BrockAdams呃......其實你今天早些時候教過這個[這裏]（http://stackoverflow.com/q/14767768/1169519）：）。 – Teemu 2013-02-08 22:29:23

// Add the click to chat button 
mydiv    = document.getElementById("optionalJobinfoData"); 
var btn   = document.createElement("input"); 
btn.type   = 'button'; 
btn.id   = 'openChat'; 
btn.value   = 'Click to Chat'; 
mydiv.innerHTML += "<i>Notify Dispatch</i><br><i>(stuck on job)</i>&nbsp;&nbsp;"; 
mydiv.appendChild(btn); 

// Credentials button 
mydiv    = document.getElementById("optionalJobinfoData"); 
btn    = document.createElement("input"); 
btn.type   = 'button'; 
btn.value   = 'Credentials'; 
btn.id   = 'openCreds'; 
mydiv.innerHTML += "<br><br><i>DSL Credentials</i> "; 
mydiv.appendChild(btn); 

document.getElementById("openCreds").onclick = function() { window.open(credsURL); }; 
document.getElementById("openChat").onclick = function() { window.open(chatURL); };

上面應該可以正常工作。問題在於innerHTML +=基本上是重新創建對象。和指針的onclick函數處理程序，因爲丟失（類型，值等都是HTML的部分，但innerHTML的不能讓指針功能的onclick）

來源

2013-02-08 18:26:14

這很好，謝謝！ – 2013-02-08 19:49:32

問題是在做mydiv.innerHTML + = ...

它類似於這裏的答案。 Manipulating innerHTML removes the event handler of a child element?

來源

2013-02-08 18:24:52

下面的行導致該問題：

mydiv.innerHTML += "<br><br><i>DSL Credentials</i> ";

這是一樣的這樣做：

var oldHTML = mydiv.innerHTML; 
var newHTML = oldHTML + "<br><br><i>DSL Credentials</i> "; 

// This destroys everything inside the div and re-creates it based on the innerHTML. 
mydiv.innerHTML = newHTML;

它基本上摧毀div和內部的任何元素重新創建這些基於HTML源代碼。但是，onclick代碼不包含在innerHTML中。

來源

2013-02-08 18:37:58 user2055306

在div中添加2個按鈕時，只有第二個按鈕工作

回答

相關問題