javascript - empty().append() 元素后的 Click 事件松散目标

Question

我有一个函数 addItems将项目动态添加到元素 <div id="totalPremium"></div>所以它清空了div并在每次调用该函数时添加项目

function addItems(){
   /....../
   $("#totalPremium").empty();
   $("#totalPremium").append("<div>item</div>");
}

点击事件函数下方拾取一个添加的item

$("#totalPremium > div").bind('click', function () {
    //do stuffs
}

问题是第一次添加项目时，我可以通过点击功能将其拾取，但在新项目替换前一个项目后，点击甚至似乎失去了目标并且不执行。我正在寻找建议以使其发挥作用。

Answer 1

您需要对动态添加的项目使用事件委托(delegate)

$("#totalPremium").on('click','div', function () {
    //do stuffs
});