Toggled Anchor에서 JQuery로 텍스트 바꾸기

토글시 앵커의 텍스트를 변경하려고합니다. 현재이 방법을 사용하고 있지만 일단 앵커 마크 업이 토글을 대체하면 더 이상 작동하지 않습니다. 누군가 이것이 왜 이런 일이 일어나고 있는지 해결책을 설명해 주시겠습니까? 많은 감사합니다.Toggled Anchor에서 JQuery로 텍스트 바꾸기

$('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>'); 

});

출처

2010-05-14 willmcneilly

간단히 대신 전체를 대체하는 앵커의 내용을 변경 앵커를 이동했습니다 :

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

더 이상 작동하지 않는 이유는 앵커가 제거 (및 교체) 될 때 이벤트 처리기가 손실 되었기 때문입니다. 예를 사용하려면 교체 할 때마다 이벤트를 리 바인드하거나 live() 또는 delegate() 메소드를 사용하여 이벤트를 바인딩해야합니다.

출처

2010-05-14 11:03:38 Matt

설명해 보겠습니다. 당신의 모범은 완벽하게 작동합니다. live()와 delegate()의 방향으로 나를 가리켜 주셔서 감사합니다. – willmcneilly

요소에 텍스트를 설정할 때 jQuery와 같이'.html()'이 아닌 ['.text()'] (http://api.jquery.com/text/#text2)를 사용하는 것이 더 효율적입니다. 먼저 적용하기 전에 html의 내용을 확인하십시오. 마찬가지로 일반 DOM의 경우 innerHTML이 HTML 파서를 호출하기 때문에 innerHTML보다 innerText/textContent를 사용하는 것이 더 효율적입니다. –

@ 앤디 E의 팁에 감사드립니다. .text()로 변경했습니다. – willmcneilly

Toggled Anchor에서 JQuery로 텍스트 바꾸기

답변

관련 문제