2

我有一个按钮，单击该按钮会调用一个函数，该函数创建 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 时触发。

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

4

2 回答 2

3

尝试：

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'starget和/或srcElement属性以查看它是否是您正在寻找的孩子。此外，您可以在将元素添加到 DOM之前附加事件- 这与我的解决方案相同，只是它不需要您访问.childNodes并获取最后一项。

于 2013-03-13T21:13:24.227 回答
-1

像这样的东西：http: //jsfiddle.net/y8yBD/

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

$('button').click(function () {
    $('#box_area').append('<div class="box"></div>');
});
于 2013-03-13T21:17:39.263 回答