动态HTML的事件监听器不起作用

Question

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

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

我为此创建了一个小提琴： Fiddle 。

我将动态元素创建为：

button = document.createElement('button');

然后添加事件监听器：

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

但是永远不会调用事件监听器。

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

Answer 1

代替：

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

采用：

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

演示 ： http : //jsfiddle.net/7nus5/

Answer 2

我为您修复了该问题： http : //jsfiddle.net/BBHzr/2/

var app = angular.module('Test', []);

app.directive('sampleDirective', function () {
    return function (scope, element, attrs) {
        var button = document.createElement('button');    

        //document.addEventListener('click', function () {
        //alert("Document Event Listener triggered");
        //});

        button.textContent = "Click Me!";

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

        button = document.querySelector("button");

        button.addEventListener('click', function () {
            //This never gets called :(
            alert("Button Event Listener triggered");
        });

    };
});

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