jquery - 选定的选项卡 jquery 不适用于附加元素

Question

我浏览了有关如何突出显示列表上当前/选定选项卡的其他示例，逻辑非常简单直接，即

    $('li').click(function (){      
$('li').not(this).removeClass('active').addClass('list');
}); 

但是我通过 jquery 的 append 方法添加的新元素没有响应调用.. 只有存在的 li 标签可以被操作.. 我想知道..

演示小提琴

Answer 1

像这样更改点击事件：

$(document).on( 'click', 'li', function (){      
    $('li').not(this).removeClass('active').addClass('list');
});

JSFiddle

Answer 2

在添加新的 li 标签后，您需要再次运行这些 javascript 代码来绑定 click 事件。您可以通过对代码进行一些更改并在追加操作后调用该代码来做到这一点。

JS代码：

function BindClickEvents() {
    $('li').unbind('click').bind('click',function (){      
       $('li').not(this).removeClass('active').addClass('list');
    });
  }

现在，您需要在正文加载/文档就绪时调用此方法，然后在任何附加操作后再次调用此方法。需要取消绑定才能删除所有先前的绑定，这些绑定可以触发多次点击事件。

Answer 3

$('ul#task-group').on('click','li',function (){
  // do something
});

Answer 4

click不适用于动态添加的元素，仅适用于click调用时页面上的元素。

您需要使用on方法。

就像是：

$('ul').on('click','li',function(){//your logic here})