1

编辑＃2：

做了一个 JS Fiddle... 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 则不会。

4

4 回答 4

2 
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 移到末尾以将所有事件声明组合在一起，但这并不重要。我将其留在顶部以帮助您更好地了解正在发生的事情。

希望这可以帮助。

于 2012-08-02T18:38:46.367 回答
0

解决它！

blacklistitem.innerHTML += blacklist[i];

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

所以我只是将 blacklist[i] 粘贴到一个 span 标签中并作为一个孩子附加，现在它工作正常:)

于 2012-08-02T21:18:00.183 回答
0

我不知道这是否是您放在这里的拼写错误，但在循环中您正在创建一个“div”，然后为其分配一种“按钮”。这有效还是抛出错误？如果是这样，那就解释了为什么事件处理程序没有获取该函数。尝试将其设为“输入”，看看它现在是否有效。

于 2012-08-02T20:30:19.693 回答
0

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

于 2012-08-02T18:44:08.553 回答