自動生成的列表組項目沒有響應活動類

Question

我有一個與引導程序的班級列表組，並填充了Bootstrap提供的基本示例，我有另一個我想填充列表組 - 從Ajax獲取的項目獲取請求。填充是正確的，但當試圖在活動元素之間切換時，它不會切換活動元素。

第一個div（boostrap的例子）正確地切換活動元素，但第二個div（我自己的）沒有。

下面是HTML：

<button id="boton1">TEST</button> 
    <div class="list-group col-md-3"> 
     <a href="#" class="list-group-item active"> 
      Cras justo odio 
     </a> 
     <a href="#" class="list-group-item">Dapibus ac facilisis in</a> 
     <a href="#" class="list-group-item">Morbi leo risus</a> 
     <a href="#" class="list-group-item">Porta ac consectetur ac</a> 
     <a href="#" class="list-group-item">Vestibulum at eros</a> 
    </div> 
    <div class="panel panel-default col-md-3"> 
     <div class="panel-heading">Geolocation 
      <span class="pull-right"><span class="fa fa-globe"></span></span> 
     </div> 
     <div class="panel-body" style="height: 400px;"> 
      <div class="list-group" id="ticker"> 

      </div> 
     </div> 
     </div> 

這裏是JavaScript：

$(document).ready(function(){ 
     var counter=0; 
     var alert; 
     $("#boton1").click(function() { 
      for(var i=0; i<5; i++){ 
       counter++; 
       if (counter===1){ 
        alert = "<a class='list-group-item active' "; 
       }else{ 
        alert = "<a class='list-group-item' "; 
       } 
       alert+="href='#'>"; 
       // Titulo de la alerta 
       alert+="<h4 class='list-group-item-heading'>"; 
       alert+="Alerta #"+counter; 
       alert+="</h4>"; 
       // Texto de la alerta 
       alert+="<p class='list-group-item-text'>"; 
       alert+="HOLIIISSS"; 
       alert+="</p>"; 
       alert+="</a>"; 
       $("#ticker").append(alert); 
      } 

     }); 

     $('.list-group-item').on('click',function(e){ 
      var previous = $(this).closest(".list-group").children(".active"); 
      previous.removeClass('active'); 
      $(e.target).addClass('active'); 
     }); 
    }); 

這裏是小提琴： http://jsfiddle.net/txfjjzsm/

Answer 1

事件處理程序只綁定到當前所選元素;它們必須在您的代碼撥打.on()時在頁面上存在。您需要爲當前和將來匹配當前選擇器的所有元素附加事件處理程序。

$('.list-group').on('click', '.list-group-item', function (event) { 
    event.preventDefault(); 

    $(this).addClass('active').siblings().removeClass('active'); 
}); 

委託事件的優點是它們可以處理後來添加到文檔中的後代元素的事件。

在此處查看生活示例：http://jsfiddle.net/cdog/en1ucfj6/。