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），在第一次创建元素时，事件被绑定并且它工作，当添加第二个元素时，第二个元素有效，但第一个元素不再起作用。如果我添加第三个元素，那么第一个和第三个（最后添加的）元素正在监听事件和工作，但是第二个元素没有。正如您可能想象的那样，如果我添加第4个元素，第2个和第4个元素将听取事件，而第1个和第3个元素将恢复不工作..

原因可能是什么。如何在一个点上绑定元素和事件监听器，而不是在另一个时间点绑定。生成的标记似乎都很好但我也会在这里提供它，也许我错过了一些东西。

这是

<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/

HTML，JQuery，绑定处理程序即时

2 个答案: