javascript - 自动生成的列表组项目不响应事件类

Question

我有一个带有 bootstrap 类 list-group 的 div，它填充了 Bootstrap 提供的基本示例，我还有另一个 div，我想用从 ajax get 请求获取的 list-group-items 填充它。填充是正确的，但是当尝试在事件元素之间切换时，它不会切换事件元素。

第一个 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'); 
        });
    });

这是 fiddle : http://jsfiddle.net/txfjjzsm/

Answer 1

事件处理程序仅绑定(bind)到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。 。您需要为现在和将来与当前选择器匹配的所有元素附加一个事件处理程序。

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

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

委托(delegate)事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。

在此处查看实例:http://jsfiddle.net/cdog/en1ucfj6/ .