onclick事件未启动javascript

onclick event not firing javascript

本文关键字：javascript 启动 事件 onclick      更新时间：2023-09-26

编辑#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和所有的blacklistitem按钮都通过element.appendChild放入文档中（它们都成功显示了！）

blacklistButton onclick会很好地触发，而blacklistitembutton onclick则不会。

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移到末尾，将所有事件声明分组在一起，但这并不重要。我把它放在顶部是为了帮助你更好地了解发生了什么。

希望这能有所帮助。

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

我不知道你在这里输入的内容是否有拼写错误，但在循环中，你要创建一个"div"，然后为它分配一种类型的"按钮"。这行得通还是出错了？如果是，那么这就解释了事件处理程序没有获取函数的原因。试着把它作为一个"输入"，看看它现在是否有效。

修复了它！

blacklistitem.innerHTML += blacklist[i];

^在这一点上，代码中的blacklistitem仍然是一个javascript项，尚未附加到文档中的父元素

所以我只是把blacklist[I]粘贴到一个span标签中，并作为子标签附加，现在它工作得很好：）

相关文章：