更改元素

时间:2018-05-04 18:33:53

标签: javascript jquery

我有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>元素发生变化 - 然后我必须重新加载页面才能再次运行。

控制台中没有信息。

我做错了什么?

1 个答案:

答案 0 :(得分: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/处理的链接的类名和文本,这更合适。