javascript - Jquery 点击事件的 Html 更新

Question

我有一个选项卡式 DIV 元素，第一次单击时会发生变化，但之后会失去功能

HTML:

<div id="holder">
<ul style="list-style:none; margin:0; padding:0;">
<li><a name="CondLink"id="onlink">Link1</a></li>
<li><a name="EffLink">Link2</a></li>
</ul>
</div>

Javascript(Jquery):

$('a[name=CondLink]').click(function(){
    $('div[id=holder]').html('<ul style="list-style:none; margin:0; padding:0;"><li><a name="CondLink" id="onlink">Link1</a></li><li><a name="EffLink">Link2</a></li></ul>');
});

$('a[name=EffLink]').click(function(){
    $('div[id=holder]').html('<ul style="list-style:none; margin:0; padding:0;"><li><a name="CondLink">Link1</a></li><li><a name="EffLink" id="onlink">Link2</a></li></ul>');
});

单击任一选项卡仅在第一次单击时正确更新 HTML，但不会在任何后续单击时执行任一功能。

(注意:控制台不会给我任何错误，但也不会在后续点击时在任何一个点击函数内命中断点)

Answer 1

您的进一步点击事件不起作用，因为您覆盖了“holder”的子元素。 基本上，您删除它们并添加没有绑定(bind)单击事件的新元素。

简单的解决方案:

替换这个:

$('a[name=CondLink]').click(function(){
   // code...
});

这样:

$(document).on('click', 'a[name=CondLink]', function(e) {
    // code...
});