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

Auto-generated list-group-items not responding to active class

本文关键字：不响应 活动 列表 自动生成      更新时间：2023-09-26

我有一个div，其中包含引导程序的类列表组，并填充了Bootstrap提供的基本示例，我还有另一个我想填充从ajax get请求获得的列表组项。填充是正确的，但是当尝试在活动元素之间切换时，它不会切换活动元素。

第一个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/

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

$('.list-group').on('click', '.list-group-item', function (event) {
  event.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
});

委托事件的优点是，它们可以处理以后添加到文档中的后代元素中的事件。

在此处查看实时示例：http://jsfiddle.net/cdog/en1ucfj6/。

另一个：

$(".list-group").click(function (e) {
    $(".list-group .active").removeClass("active");
    $(e.target).addClass("active");
});
相关文章：