動態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");
        });

    };
});

您引用的是按鈕的創建，而不是事件偵聽器的頁面上的元素—或僅僅是頁面上代碼的順序。 無論哪種方式，它現在都可以使用。