在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个按钮时，只有第二个按钮工作

回答

相关问题