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

Question

我有一個帶有bootstrap的類list-group的div，它用Bootstrap提供的基本示例填充，還有另一個我想用從ajax get請求獲得的list-group-Items填充的div。 填充是正確的，但是當嘗試在活動元素之間切換時，它不會切換活動元素。

第一個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/ 。

Answer 2

另一個：

$(".list-group").click(function (e) {
    $(".list-group .active").removeClass("active");
    $(e.target).addClass("active");
});