用JQuery替换切换锚中的文本

我正在尝试更改锚点切换中的文本。我目前正在这样做，但发现一旦锚标记替换了切换，切换就不再有效。有人能解释一下为什么会发生这种情况以及解决办法吗？非常感谢

    $('a#toggleHeader').toggle(function() {
    $('#header-wrapper').slideUp();
    $(this).replaceWith('< href=\"#\" id="toggleHeader">Show Header</>');

$（'a#toggleHeader'）。切换（函数（）{
$（“#标题包装器”）.slideUp（）；
$（this）.replaceWith（'Show Header'）；

//注意：我已经移动了锚，因为我只能作为新用户发布一个锚

},function(){
    $('#header-wrapper').slideDown();
    $(this).replaceWith('<a href=\"#\" id="toggleHeader">Hide Header</a>');

});

}，函数（）{
$（“#标题包装器”）.slideDown（）；
$（此）。替换为（“”）；
});

只需更改锚定的内容，而不是替换整个内容：

$('a#toggleHeader').toggle(function() {
    $('#header-wrapper').slideUp();
    $(this).text('Show Header');
}, function () {
    $('#header-wrapper').slideDown();
    $(this).text('Hide Header');
});

---

它不再工作的原因是，当锚被移除（和替换）时，事件处理程序正在丢失。如果希望示例正常工作，则需要在每次替换事件时重新绑定事件，或者使用或方法绑定事件。

只需更改锚定的内容，而不是替换整个事件：

$('a#toggleHeader').toggle(function() {
    $('#header-wrapper').slideUp();
    $(this).text('Show Header');
}, function () {
    $('#header-wrapper').slideDown();
    $(this).text('Hide Header');
});

---

它不再工作的原因是，当锚被移除（和替换）时，事件处理程序正在丢失。如果希望示例正常工作，则需要在每次替换事件时重新绑定事件，或者使用or方法绑定事件。

这就解释了这一点。你的例子很好用。感谢您为我指出live（）和delegate（）即将阅读它们以供将来参考的方向。在元素上设置文本时，使用它比

.html（）

更有效，因为jQuery将在应用之前首先检查html的内容。与普通DOM类似，使用

innerText

/

textContent

比

innerHTML

更有效，因为

innerHTML

将调用HTML解析器。这就是原因。你的例子很好用。感谢您为我指出live（）和delegate（）即将阅读它们以供将来参考的方向。在元素上设置文本时，使用它比

.html（）

更有效，因为jQuery将在应用之前首先检查html的内容。与普通DOM类似，使用

innerText

/

textContent

比

innerHTML

更有效，因为

innerHTML

将调用HTML解析器。