编辑：

Question

我正在编写一个代码，它将创建一个新的li元素并将其附加到ul，然后单击我需要在元素中添加一个“选定”类，再次单击删除该类，它可以正常工作很好的li元素已经存在，但它不适用于我正在添加的新元素，我无法理解为什么......

这是我的代码：

$(document).ready(function() {
	var button = document.querySelector('.container a'),
		list = document.getElementById('list'),
		li = list.children;

	$(button).on('click', function() {
		var li = document.createElement('LI');
		var word = prompt('Enter a word');
		var text = document.createTextNode(word);
		li.appendChild(text);
		list.appendChild(li);
		console.log(list.children);
	}); // click event

	$(li).on('click', function() {
		if ($(this).hasClass('selected')) {
			$(this).removeClass('selected');
		} else {
			$(this).addClass('selected');
		}
	}); // click event

	// console.log(li);
});

实际上代码很简单，我有点困惑为什么它不起作用。

Answer 1

您正在使用jQuery，所以这很简单：

 $("#list").on("click", "> li", function() {
   $(this).toggleClass("selected");
 });

上面的代码创建了一个委派的事件处理程序。处理程序附加到列表容器，因此它将捕获从内部冒泡的所有事件。这意味着您可以自由添加<li>元素，新事件中的事件将与旧事件完全相同。

Answer 2

它不起作用，因为您正在创建新的DOM元素，并且这些元素没有附加到它们的侦听器。用这个替换你的代码。

   $("body").on('click', "li", function() {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            $(this).addClass('selected');
        }
    }); // click event

编辑：

如果你需要这个。我创建了一个vanilla事件处理程序，它将事件处理程序附加到所有元素。

fakejQuery == jQuery's $但更简单的版本:)。该代码适用于IE8 +，在IE8中，您只能使用CSS2选择器

window.fakejQuery = document.querySelectorAll.bind(document)
eventHandler: function (element, eventType, fn) {
    if (document.addEventListener) {
        for (var i = fakejQuery(element).length - 1; i >= 0; i--) {
            fakejQuery(element)[i].addEventListener(eventType, fn, false)
        }
    } else if (document.attachEvent) {
        for (var i = fakejQuery(element).length - 1; i >= 0; i--) {
            fakejQuery(element)[i].attachEvent("on" + eventType, fn)
        }
    } else {
        alert("Ooops, no event listener methods found!");
    }
}

我的点击事件不适用于新的li元素

2 个答案:

编辑：