更改元素

Question

我有2个链接：

<span id="a-start-container">
<a id="a-start" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>

<span id="a-stop-container">
<a id="a-stop" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>

当我点击第一个（a-start）时，我通过删除<a>元素禁用它，同时通过添加{{1}启用第二个（a-stop）元素：

<a>

当我点击第二个（a-stop）时，我通过删除$(document).ready(function() { $("#a-start").click(function(e){ $("#a-stop-container").html("<a id='a-stop' href=''><i class='fa fa-fw fa-stop inner-circle-color'></a>"); $("#a-start-container").html("<i class='fa fa-fw fa-play inner-circle-color'>"); }) }); 元素禁用它，同时通过添加{{1}启用第一个（a-start）元素：

<a>

问题是它只适用于第一次点击。例如，我单击第一个（a-start），然后更改a-start并启用a-stop。但是，当我点击停止时，JavaScript不再做出反应。反之亦然。两者都工作正常，直到<a>元素发生变化 - 然后我必须重新加载页面才能再次运行。

控制台中没有信息。

我做错了什么？

Answer 1

您应该考虑根据您使用的模式将其更改为on而不是click。可以在on

找到click的使用情况

您正在做的是替换注册了处理程序/侦听器的整个DOM内容，因此它不会在首次StackPane Group // for other content Group // The make hbox "wrap-content" HBox // For the 2 buttons JfxToggleButton // "This is test" JfxButton // "Restart" button 事件之后发生的DOM更改中重新注册。

然而，您似乎只想切换应该通过http://api.jquery.com/on/处理的链接的类名和文本，这更合适。