Question

我对JavaScript编程非常陌生，我正在尝试学习JavaScript中的事件处理程序。我在动态创建的元素上添加事件处理程序。我制作了一个简单的购物清单代码，通过该代码我可以将数据输入清单中，并且在每个商品的右侧添加了一个删除图标。我在该图标上添加了事件处理程序，但它仅适用于清单中未显示的商品动态添加的。

我尝试了大约一天的时间，但是仍然找不到使用纯JavaScript 的正确方法。我已经遍历了关于堆栈溢出的几乎所有答案以及许多其他资源，但是仍然无法实现该解决方案，我在找出解决方案的过程中采用了关于堆栈溢出的答案之一，这是纯JavaScript，

问题链接：add event listener on elements created dynamically

这个问题与我的相似，但是我按照答案的回答进行了尝试，但仍然对我不起作用。

document.querySelector("ul").addEventListener('click', function(event) {
    if (event.target.tagName === "I") {
        alert("hmm.. you clicked.");
    }
});

小提琴链接：https://jsfiddle.net/65erpycb/

var input = document.getElementById("userinput");
var enter = document.getElementById("enter");
var ul = document.querySelector("ul");
var listItem = document.querySelectorAll("li");

function toggleFunction(e) {
    if(e.target.tagName === "LI") {
        e.target.classList.toggle("done");
    }
}

function addListItemOnClick() {
    if (input.value.length > 0) {
        console.log(input.value.length);
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value));
        ul.appendChild(li);
        input.value = "";
        var d = document.createElement("div");
        d.classList.add("fas", "fa-trash");
        li.appendChild(d);
    }
}
function addListItemOnPress() {
    if (input.value.length > 0 && event.keyCode === 13) {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value));
        ul.appendChild(li);
        input.value = "";
        var d = document.createElement("div");
        d.classList.add("fas", "fa-trash");
        li.appendChild(d);
    }
}
enter.addEventListener("click", addListItemOnClick);
input.addEventListener("keypress", addListItemOnPress);
ul.addEventListener("click",toggleFunction);

document.querySelector("ul").addEventListener('click', function(event) {
    if (event.target.tagName === "I") {
        alert("hmm.. you clicked.");
    }
});

.box {
    text-align: center;
    border: 2px solid black;
}

h1 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 50px;
}

#first {
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-decoration: underline;
}

ul {
    border: 1px solid black;
    padding: 0;
}

li {
    display: block;
    list-style: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    text-decoration: underline;
}

#userinput {
    text-align: center;
}

.done {
    text-decoration: line-through;
}

.fa-trash {
    float: right;
}

<!DOCTYPE html>
<html>
<head>
	<title>Javascript + DOM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="box">
	<h1>Shopping List</h1>
	<p id="first">Get it done today</p>
	<input id="userinput" type="text" placeholder="enter items">
	<button id="enter">Enter</button>
	<ul id = "items">
		<li>Notebook<i class="fas fa-trash"></i></li>
		<li>Jello<i class="fas fa-trash"></i></li>
		<li>Spinach<i class="fas fa-trash"></i></li>
		<li>Rice<i class="fas fa-trash"></i></li>
		<li>Birthday Cake<i class="fas fa-trash"></i></li>
		<li>Candles<i class="fas fa-trash"></i></li>
	</ul>
	</div>
	<script type="text/javascript" src="script.js"></script>
	<script src="https://kit.fontawesome.com/28803a998e.js"></script>
</body>
</html>

我希望当我动态添加项目时，删除按钮也应该起作用。

Answer 1

添加的项目是div标签元素。但是原始项目是i标签元素。 event.target.tagName === "I"测试仅与i标签匹配，而不与div标签匹配。

更新添加的商品代码（在addListItemOnClick和addListItemOnPress中）：

document.createElement("div")

成为：

document.createElement("i")

Answer 2

如果您分离数据并查看并使用html-inline绑定（对于小型项目，则为acceptable-类似于angular / react / vue框架中的模板...），代码将更加小巧＆干净

let data=[
  { name: "Notebook" },
  { name: "Jello" },
  { name: "Spinach" },
  { name: "Rice" },
  { name: "Birthday" },
  { name: "Candles" },
];

function add() {
  data.push({ name: userinput.value });
  userinput.value='';
  refresh();
}

function del(i) {
  data.splice(i,1);
  refresh();
}

function refresh() {
  items.innerHTML = data.map((x,i)=> `
    <li>${x.name}<i class="fas fa-trash" onclick="del(${i})"></i></li>
  `).join('');
}

refresh();

<div class="box">
  <h1>Shopping List</h1>
  <p id="first">Get it done today</p>
  <input id="userinput" type="text" placeholder="enter items">
  <button id="enter" onclick="add()">Enter</button>

  <ul id="items"></ul>

</div>

<script src="https://kit.fontawesome.com/28803a998e.js"></script>

将事件侦听器添加到动态添加的列表元素

2 个答案: