HTML，JQuery的，在飛行

Question

綁定處理程序，我根據一些Ajax響應，這是我想要的js事件偵聽器添加到他們創造一些DOM元素。以下是我的代碼：

$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>"; 

以上輸出在這裏被用作顯示

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

追加後（即$（列表）。html的（）將返回上面生成的標記。）元件，我調用一個方法「bind_functions（）」，其結合製備的事件處理程序如下：

function bind_functions(){ 

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

上面的代碼只是簡單地創建AA DIV其周圍的無序列表<ul>包裹着它孩子的名單<li>。該元素被創建多次，目的是創建多個過濾器。點擊後，他們滑下顯示其各自的<ul><li>元素。

這一切似乎工作正常，直到你添加多個..發生什麼是（非常奇怪的IMO），在第一次創建元素時，事件綁定和它的工作原理，當添加第二個，第二個元素的作品，但第一個元素不再工作了。如果我添加第三個元素，那麼第一個和第三個（最後添加的）元素正在偵聽事件和工作，但第二個元素沒有。正如你可能想象，如果我添加了4元，2號和4號元素會聽取事件，而第一個和第三個是回不工作..

什麼可能是這個原因。一個元素如何在某個時刻被綁定到事件監聽器，而不是在另一個時間點。生成的標記一切似乎都很好，但我也會在這裏提供它，也許我錯過了一些東西。

這

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