javascript - 在纯 JS 中实时/重新创建 jQuery

Question

我正在用纯 JS 制作一个待办事项列表 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)