jQuery/Javascript 바꾸기 기능은 한 번만 작동합니다.

Question

같은

<button id="toggle_photo"> 
<span id="photo_text">Hide Photos (1)</span> 
<img class="icon" alt="Photos" src="/img/photos-16.png"> 
</button> 

및 jQuery/자바 스크립트를 클릭하면 텍스트를 변경하려면

$('#toggle_photo').click(function(){ 
    var text = $('#photo_text').text(); 
    $('#photo_text').text(
     text.match(/Hide Photos/) ? text.replace("Hide", "Show") : text.replace("Show", "Hide")); 
    $('.photo_frame').toggle('slow'); 
    }); 

이 처음 단추를 클릭하고 단추 텍스트를 Hide Photo (1)에서 Show Photo (1)로 변경됩니다. 다음으로 단추 html은 AJAX 호출을 통해 새 텍스트로 바뀌고 새로운 내용은 카운트를 제외하고 동일하므로

<button id="toggle_photo"> 
<span id="photo_text">Hide Photos (3)</span> 
<img class="icon" alt="Photos" src="/img/photos-16.png"> 
</button> 

그러나이 시간 동안 요소가 클릭 이벤트, 왜?

Answer 1

당신은 이미 스스로 답을 주었다

다음, 버튼 HTML은 ... 는 AJAX 호출을 통해 새로운 텍스트로를 대체

당신은 현재 요소를 제거하고 추가하는 것입니다 새로운 것. 요소는 동일한 유형이고 동일한 ID를 가질 수 있지만 여전히 다른 요소입니다.

HTML을 변경 한 후에 다시 이벤트 처리기를 바인딩하거나 .live()^[docs] 또는 .delegate()^[docs]을 사용하여 이벤트 처리기를 바인딩하십시오.

편집 : 전체 버튼 또는 그 내용을 바꿀 것인지 실제로 확신 할 수 없습니다. 그러나 이것이 이것이 문제라고 가정합니다. 이것이 도움이되지 않는다면 좀 더 구체적이어야하고 HTML을 대체하는 기능을 게시해야합니다.