用JQuery替换Toggled Anchor中的文本

Question

我正试图在切换时更改锚点中的文本.我现在正在这样做,但发现一旦锚标记取代了切换,就不再有效了.有人可以解释为什么会发生这种情况并提供解决方案吗？非常感谢.

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

//注意:我移动了锚点,因为我只能将一个锚点作为新用户发布

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

});

Answer 1

只需更改锚点的内容,而不是替换整个事物:

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

它不再起作用的原因是因为当移除(并替换)锚时,事件处理程序丢失了.如果您希望您的示例正常工作,您可能需要在每次替换事件时重新绑定事件,或者使用live()或delegate()方法绑定事件.