Question

我有一个按钮，当点击时调用一个创建div的函数，并将它们作为childeren添加到另一个充当容器的div。

我在函数结束时尝试了这个：

x = document.getElementById("box_area").childNodes;
x[x.length-1].addEventListener("click",alert("test"),false) //to add a listener to the div just created.

单击该按钮时，单击该按钮时会触发该功能，而不会在单击该按钮时触发该功能。

我知道如何为每个动态div添加一个事件监听器，因为我的工作不起作用。

Answer 1

尝试：

x[x.length-1].addEventListener("click", function () {
    alert("test");
}, false);

请注意，第二个参数是对匿名函数的引用。之前，当执行此行时，您立即调用alert，而没有完成您真正想要的内容。

以下是一个示例，基本上使用了您提供的内容：http://jsfiddle.net/8Q63G/

更好的例子，通过共享一个函数：http://jsfiddle.net/8Q63G/1/

虽然要支持所有浏览器，但您应该使用以下内容：

window.onload = function () {
    x = document.getElementById("box_area").childNodes;
    for (var i = 0; i < x.length; i++) {
        //x[i].addEventListener("click", boxClicker, false);
        addEvent(x[i], "click", boxClicker);
    }
};

function addEvent(element, event_name, func) {
    if (element.addEventListener) {
        element.addEventListener(event_name, func, false); 
    } else if (element.attachEvent)  {
        element.attachEvent("on"+event_name, func);
    }
}

function boxClicker() {
    console.log(this.innerHTML);
}

http://jsfiddle.net/8Q63G/3/

虽然还有其他几种选择。您可以向“box_area”元素添加一个事件，然后检查event的{{1}}和/或target属性，看看它是否是您正在寻找的孩子。此外，您可以附加事件之前将元素添加到DOM中 - 这与我的解决方案相同，不同之处在于它不需要您访问srcElement并获取最后一个项目

Answer 2

像这样：http://jsfiddle.net/y8yBD/

$('#box_area').on('click', 'div', function (e) {
    alert('test');
});

$('button').click(function () {
    $('#box_area').append('<div class="box"></div>');
});

向所有子项添加事件侦听器

2 个答案: