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

您的其他点击事件不起作用，因为您覆盖了“所有者的”子元素。 基本上，您删除它们并添加没有绑定click事件的新元素。

简单的解决方案：

替换为：

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

有了这个：

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

Answer 2

那是因为您要替换链接。 因此，绑定事件侦听器不再位于新链接上，因此只需在替换链接后重新绑定它们即可。

 function bindClicks(){ $('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>'); bindClicks(); }); $('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>'); bindClicks(); }); } bindClicks(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>