Javascript 动态HTML的事件侦听器不工作

使用angularjs指令，我将向插入DOM的动态创建的HTML元素添加事件侦听器

但是，事件侦听器未触发。如果我向文档中添加一个事件监听器，它可以工作，但似乎没有调用与动态添加的元素关联的事件监听器

我已为该问题创建了一个小提琴：

我将动态元素创建为：

button = document.createElement('button');

然后添加事件侦听器：

button.addEventListener('click', function () {
    alert("Button event listener is called");
});

但从未调用事件侦听器

编辑：请注意，该指令将在多个位置使用，我正在寻找一种不使用类或ID但仍必须唯一捕获点击的解决方案。

我为您修复了它：

您引用的是按钮的创建，而不是事件侦听器页面上的元素——或者它只是页面上代码的顺序。无论哪种方式，它现在都可以工作。

而不是：

element[0].insertAdjacentHTML('afterend', button.outerHTML);

使用：

---

演示：

虽然这确实是一个解决方案，但恐怕它不是我正在寻找的解决方案。使用您的解决方案，将触发事件侦听器。但是，如果页面上有多个按钮，则所有按钮都将触发此操作。我希望只处理已创建按钮的单击事件，而不是页面上的所有按钮。一种解决方案是向新创建的元素添加一个类，然后使用该类侦听事件，但这并不优雅。然后只需将ID应用于按钮，并使用getElementById而不是querySelector。setAttribute（“id”、“myButton”）；这将是按类查询，除了我们按ID查询。仍然不是我要找的。这怎么不是你要找的？从你的问题来看，这正是你想要的。你的问题可能需要更具体一些，这很奇怪。我必须使用

outerHTML

，因为如果我只使用按钮，我会得到

[Object HTMLButtonElement]

，而不是实际的按钮。这与fiddle中看到的代码完全相同，但我得到的是对象而不是HTML。你知道为什么吗？请注意，这个例子使用的是InsertAdjaceEntelement而不是insertAdjacentHTML。我非常感谢你！昨天我想弄明白这一点，但直到你指出这一点，我才注意到。非常感谢！您是否希望遍历页面上的每个按钮，并检查每个按钮上是否有单击？为什么不将所有按钮存储在一个节点列表中，以便循环使用它们，并在循环中添加事件侦听器？@NickDugger否。我不会遍历页面上的每个按钮。我希望该指令跟踪插入的按钮，当单击按钮时，调用该按钮的单击处理程序，因为根据单击的按钮，我将设置相应的模型。循环太密集了。

element[0].insertAdjacentHTML('afterend', button.outerHTML);

element[0].insertAdjacentElement('afterend', button);