jquery - 使用 JQuery 替换切换 anchor 中的文本

Question

我正在尝试更改切换上 anchor 中的文本。我目前正在这样做，但发现一旦 anchor 标记被替换，切换就不再起作用。有人可以解释为什么会发生这种情况以及解决方案吗？非常感谢。

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

//注意:我移动了 anchor ，因为我只能作为新用户发布一个 anchor

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

});

Answer 1

只需更改 anchor 的内容，而不是替换整个内容:

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

它不再工作的原因是因为当 anchor 被删除(和替换)时事件处理程序丢失了。如果您希望示例正常工作，则需要在每次替换事件时重新绑定(bind)事件，或者使用 live() 绑定(bind)事件。或delegate()方法。