如何在innerHTML中獲取click事件？

Question

我有這個動態創建的布局：

 for (let i = 1; i < 10; i++) { document.querySelector('.card-body').innerHTML += `<div class="row" id="img_div"> <div class="col-12 col-sm-12 col-md-2 text-center"> <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80"> </div> <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6"> <h4 class="name"><a href="#" id="title` + i + `">Name</a></h4> <h4> <small>state</small> </h4> <h4> <small>city</small> </h4> <h4> <small>zip</small> </h4> </div> <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row"> </div> </div> ` document.getElementById("title" + i).addEventListener('click', function() { console.log(i) }); }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="card-body"> <!-- person --> </div>

我想讓事件點擊每個h4 class="name"並顯示與i相關的數字的日志。

但是， console.log僅顯示與i相關的最后一個（在本例中為i=9 ），並且不適用於其他i數字。 為什么會發生這種情況？ 我需要做什么？

Answer 1

在innerHTML上使用+=會破壞HTML 內部元素上的事件偵聽器。 正確的方法是使用document.createElement 。 這是一個最小的完整示例：

 for (let i = 1; i < 10; i++) { const anchor = document.createElement("a"); document.body.appendChild(anchor); anchor.id = "title" + i; anchor.href= "#"; anchor.textContent = "link " + i; document.getElementById("title" + i) .addEventListener("click", e => console.log(i)); }

 a { margin-left: 0.3em; }

當然，這里不需要document.getElementById ，因為我們剛剛在循環塊中創建了對象。 這節省了潛在的昂貴的樹走。

 for (let i = 1; i < 10; i++) { const anchor = document.createElement("a"); document.body.appendChild(anchor); anchor.href= "#"; anchor.textContent = "link " + i; anchor.addEventListener("click", e => console.log(i)); }

 a { margin-left: 0.3em; }

如果您在示例中具有任意的字符串化 HTML 塊，則可以使用createElement("div") ，將其innerHTML設置為該塊並根據需要添加偵聽器。 然后將 div 添加為容器元素的子元素。

 for (let i = 1; i < 10; i++) { const rawHTML = `<div><a href="#" id="link-${i}">link ${i}</a></div>`; const div = document.createElement("div"); document.body.appendChild(div); div.href= "#"; div.innerHTML = rawHTML; div.querySelector(`#link-${i}`) .addEventListener("click", e => console.log(i)); }

Answer 2

innerHTML重新繪制完整的 html，因此所有先前附加的事件都丟失了。 使用insertAdjacentHTML()

 for(let i=1;i<10;i++){ document.querySelector('.card-body').insertAdjacentHTML('beforeend',`<div class="row" id="img_div"> <div class="col-12 col-sm-12 col-md-2 text-center"> <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80"> </div> <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6"> <h4 class="name"><a href="#" id="title`+i+`">Name</a></h4> <h4> <small>state</small> </h4> <h4> <small>city</small> </h4> <h4> <small>zip</small> </h4> </div> <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row"> </div> </div> `); document.getElementById("title"+i).addEventListener('click', function () { console.log(i) }); }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="card-body"> <!-- person --> </div>