Question

我有一个带有bootstrap的类list-group的div，并且它填充了Bootstrap提供的基本示例，我还有另一个我希望填充从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'); 
        });
    });

这是小提琴： 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");
});

自动生成的列表组项目未响应活动类

2 个答案: