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

    };
});

您正在引用按钮的创建，而不是实际上是事件侦听器页面上的元素 - 或者它只是页面上代码的顺序。无论哪种方式，它现在都有效。

动态HTML的事件监听器无法正常工作

2 个答案: