Question

编辑＃2：

制作一个JS小提琴... http://jsfiddle.net/N2p6G/（我硬编码了一些我确定能正常工作的东西，但问题仍然存在）

原件：

所以，我已经编写了成千上万行的javascript，并且使用了几百次这样的代码，我不明白发生了什么。

blacklistitembutton.onclick = function() {
  console.log("clicked.");
}

以上代码似乎不起作用......我无法弄清楚为什么

事实上，我之前在同一个文件中使用了相同的方法......它工作正常！

settings.onclick = function() {
  settings_popup.toggle();
}

编辑：

它可能与它在for循环中执行的事实有关吗？这是代码......

var blacklistButton = document.createElement('input');
blacklistButton.type = 'button';
blacklistButton.value = "Add Current Site to Blacklist";
blacklistButton.onclick = function() {
  console.log('blacklistButton clicked');
}

for (var i=0;i<blacklist.length;i++) {
  var blacklistitembutton = document.createElement('div');
  blacklistitembutton.type = 'button';
  blacklistitembutton.blacklistValue = blacklist[i];
  blacklistitembutton.value = "X";
  blacklistitembutton.onclick = function() {
    console.log("clicked.");
  }
}

然后将blacklistButton和所有blacklistitembuttons都通过element.appendChild放入文档中（并且它们都显示成功！）

blacklistButton onclick发射得很好，blacklistitembutton onclick没有。

Answer 1

document.addEventListener('click', function(){
    console.log('clicked');
}, false);

编辑：

以下是在小提琴中重写代码：http://jsfiddle.net/N2p6G/1/

您的代码中有很多东西让我担心。希望通过我的重写，您可以看到有更好的方法来处理某些事情。

1）我不确定你为什么在开头使用document.write（）。这个目的很少。

2）您正在修改DOM 方式。您在代码中创建的一些DOM元素更好地用作html中的目标位置。只有动态创建的输入按钮元素需要在javascript中完成。请记住，修改DOM应该尽可能少。

3）不要使用onclick，onsubmit，onhover等语法分配事件。事件应仅使用addEventListener绑定到DOM元素。以正确方式执行此操作的另一个好处是，您可以根据需要将同一类型的多个事件分配给同一个元素。此外，如果您需要一些额外的州代码，您可以在以后有选择地删除特定事件。

4）几年前有人争论过使用innerHTML和字符串模板比使用DOM创建方法更快/更好。有一段时间，最好的解决方案是使用documentFragments和两种方法的组合。现在，它并不重要，因为所有的浏览器都非常快，所以为了简单起见，只需要使用innerHTML。

这也可以追溯到“不要过多地触摸DOM”的规则。如果你查看我的代码，你可以看到我正在将最终的html组装成一个元素数组，最后将它们作为单个字符串连接起来。然后使用单个innerHTML语句将其呈现给DOM。我只是触摸DOM一次，而不是多次。

5）最后一点再次进入事件。在代码的开头和结尾，您可以看到我为DOM元素添加事件的位置和方式。实际上，开头的addEventListener可以移动到最后，将所有事件声明组合在一起，但这并不重要。我把它留在了顶部，以帮助你更好地理解发生了什么。

希望这有帮助。

Answer 2

对于无限制的事件绑定，请使用addEventListener或attachEvent方法。您不能使用传统方法添加多个相同类型的事件。

Answer 3

我不知道你放在这里是不是一个错字，但在循环中你创建了一个“div”，然后给它分配了一个“按钮”。这有用还是抛出错误？如果是，那就解释了为什么事件处理程序没有获得该函数。尝试将其作为“输入”并查看它现在是否有效。

Answer 4

修正了它！

blacklistitem.innerHTML += blacklist[i];

^搞砸了，此时在代码中blacklistitem仍然是一个javascript项，尚未附加到文档中的未来父元素

所以我只是将黑名单[i]粘贴到span标签中并作为孩子附加，现在它可以正常工作：）

onclick事件没有触发javascript

4 个答案: