jQuery Cant删除li一旦添加
当我在列表中添加一个新的
http://jsfiddle.net/43nWM/
干杯
因为当浏览器正在读取您的javascript代码时,动态添加的li不在DOM中,因此无法找到它。 而是将处理程序添加到父级,并侦听如下:
$('#cblist').on('click', 'a', function(){ $(this).parent('li').remove(); return false; });
小提琴: http : //jsfiddle.net/43nWM/3/
你可以试试。
$(function(){ $('#cblist a').live('click', function(){ $(this).parent('li').remove(); return false; }); });
您只将click事件绑定到当前的“删除”链接,而不是将来的链接。 为此使用事件委托,以涵盖两个基础。 更改:
$('#cblist a').click(function(){
至
$('#cblist').on('click', 'a', function() {
这里的秘密是事件授权 。 当您调用.click(function() {...})
或.on('click', function() {...})
,事件处理程序仅分配给运行代码时与选择器匹配的元素。 它不会影响以后添加的元素。
但是,您可以使用事件委派将事件处理程序分配给包含所有动态元素的静态元素,只要与动态选择器匹配的元素触发该类型的事件,它就会运行回调函数:
$('#cblist').on('click', 'a', function() { $(this).parent('li').remove(); return false; });
有关详细信息,请.on()
函数文档中标题为“ 直接”和“委派事件 ”的部分。
$(function(){ $('#cblist').on('click','a',function(){ $(this).parent('li').remove(); return false; }); });
查看这个jsfiddle
您应该添加此代码以添加动态li
标签
$li = $(''+name+' '); $a = $('remove'); $a.click(function(){ $(this).parent('li').remove(); return false; }); $li.append($a);
我还更新了jsfiddle上的代码
另一种选择是使用on()函数,如下所示: http : //jsfiddle.net/43nWM/12/
说实话,我实际上更喜欢这里的其他两个解决方案。
编辑:使用on()代替。 我最初建议使用live()