Question

我正在使用纯JS创建一个todo列表webapp（尽量不使用jQuery！）而且我在一个方面苦苦挣扎，将一个点击处理程序附加到我刚刚创建的元素上。这是创建代码：

new_li = document.createElement('li');
new_li.innerHTML = item.value;
new_li.setAttribute('rel', time);
prependElement(tudu_list, new_li);

只需按一下按钮即可。

我需要在UL中的每个LI上附加一个点击处理程序。但是当我点击新创建的LI时没有任何反应。我猜它是一个问题，没有绑定到元素的点击处理程序。在jQuery中我通常会做.live（），但是在JS中，我不知道如何解决这个问题！

Answer 1

将事件处理程序附加到<ul>元素，然后检查事件的target属性 - 如果它是<li>个元素之一，则执行事件处理程序，否则只是跳过它。

https://developer.mozilla.org/en/DOM/event.target

Answer 2

一种方法是：

function clickHandler(){
    // Do something...
}

new_li = document.createElement('li');
new_li.innerHTML = item.value;
new_li.setAttribute('rel', time);
new_li.onclick = clickHandler; // <===========
prependElement(tudu_list, new_li);

当然，您可以（并且应该）使用addEventListener而不是内联脚本：

new_li.addEventListener('click', clickHandler)

在纯JS中重新创建jQuery live / on

2 个答案: