HTML、JQuery、动态绑定处理程序

Question

我正在根据一些ajax响应创建一些dom元素，我想向它们添加js事件侦听器。以下是我的代码：

$output = "<div><div class='recipients'><ul>";
foreach($contacts as $contact){
$output .= "<li>
<div>
<input class='contact-checkbox' type='checkbox' checked/>
<span>{$contact['dnr']['tel_no']}</span>
</div>
</li>";
}
$output .="</ul></div></div>";

上面的输出在这里使用，如图所示(即$(list).html()返回上面生成的标记。)

$("<div id='" + filter_id + "' class='filter toggler'>" + filter_id + $(list).html() + "</div>").appendTo($('#recipient-list'));

添加元素后，我调用一个方法"bind_functions()"，该方法绑定准备好的事件处理程序，如下所示：

function bind_functions(){
$('.toggler').click(function(e){
$(this).toggleClass('active');
//e.stopPropagation();
});
$('.recipients').click(function(e){
e.stopPropagation();
});
}

上面的代码只是创建了一个div，它被包装在一个无序列表<ul>及其子列表<li>周围。此元素创建了多次，目的是创建多个过滤器。单击后，它们向下滑动以显示各自的<ul><li>元素。

在你添加多个之前，这一切似乎都很好。。发生的事情是(非常奇怪的IMO)，在第一次创建元素时，事件被绑定并工作，当添加第二个元素时，第二个元件工作，但第一个元素不再工作。如果我添加第三个元素，那么第一个和第三个(最后添加的)元素正在听事件并工作，但第二个没有。正如你可能想象的那样，如果我添加第四个元素，第二个和第四个将收听事件，而第一个和第三个将返回到不工作状态。。

这可能是什么原因。元素如何在某个时间点绑定到事件侦听器，而在另一个时间点不绑定。生成的标记看起来都很好，但我也会在这里提供它，也许我遗漏了一些东西。

这是

<div id="Any-Female-Any" class="filter toggler">Any-Female-Any
<div class="recipients">
<ul>
<li>
<div>
<input class="contact-checkbox" type="checkbox" checked="">
<span>441895324</span>
</div>
</li>
<li>
<div>
<input class="contact-checkbox" type="checkbox" checked="">
<span>449185147</span>
</div>
</li>
</ul>
</div>
</div>

这是在谷歌中检查时在dom树中生成的内容

Answer 1

您可以尝试使用：

$(document)
.on('click', '.toggler', function(){
// toggler click
})
.on('click', '.recipients', function(){
// recipients click
})
;

不需要创建调用bind_functions函数，它将处理运行时创建的新DOM元素。

Answer 2

使用jQuery的绑定功能会更好：https://api.jquery.com/bind/