在 div 中添加 2 个按钮时，只有第二个有效答案

【问题标题】：When adding 2 buttons inside div, only the second one works在 div 中添加 2 个按钮时，只有第二个有效
【发布时间】：2013-02-09 02:37:58
【问题描述】：

使用greasemonkey 添加这两个按钮。我试过颠倒顺序，它总是第二个添加的按钮有效。另一个按钮不会触发 onclick 事件。

// 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);

【问题讨论】：

element.onclick 几乎不起作用，请改用addEventListener()。请查看this article
@Teemu，你是对的（在 any 情况下，onclick 也是不好的做法），但遗憾的是，它有时在 Greasemonkey 1.0 或更大。直到沙盒模式发生变化并且脚本中断。在用户脚本案例中，它是“定时炸弹”编码的一个示例。暂时可能看起来还不错，但最终，它会让你受益。
@BrockAdams 好吧...实际上你今天早些时候教过我这个here :)。

标签： javascript greasemonkey

【解决方案1】：

问题在于执行 mydiv.innerHTML += ...

这与这里的答案相似。 Manipulating innerHTML removes the event handler of a child element?

【讨论】：

【解决方案2】：

// 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 函数的指针）

【讨论】：

【解决方案3】：

以下行导致问题：

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 中。

【讨论】：