jQuery replaceWith 이후에 CSS 클래스가 누락되었습니다. 어떻게 고치는 지?

Question

이 줄을 master.cs 페이지에 추가했습니다. CSS 파일에서

<h4 class="hideAndShow">[ - ] Hide</h4> 

: 같은 master.cs 페이지에서 다음

.hideAndShow 
{ 
    position: fixed; 
    top:120px; 
    right:420px; 
    color: white; 
    background-color:green; 
} 

이.

 <script> 
      var hideShowBool = true; 

      $('.hideAndShow').bind('click', function() 
      { 
       if (hideShowBool == true) 
       { 
        $(this).replaceWith('<h4 class="hideAndShow">[ + ] Show</h4>'); 
        hideShowBool = false; 
       } else 
       { 
        $(this).replaceWith('<h4 class="hideAndShow">[ - ] Hide</h4>'); 
        hideShowBool = true; 
       } 
      }); 
     </script> 

예상되는 동작 : 텍스트 [-] 사이를 전환해야 숨기기 : [-] 숨기기 [+] 및 을 표시합니다.

하지만 첫 번째 클릭에 대해서만 반응합니다. 그 안에 [-] 숨기기은 [+] 표시으로 바뀝니다. 그러나 그것을 다시 클릭 할 때; 예상대로 효과가 없습니다.

어디에 문제가 있습니까? 어떻게 고칠 수 있습니까?

Answer 1

이는 요소를 바꾸기 때문에 새 요소에 바인딩 된 클릭 핸들러가 없기 때문입니다. 당신은 이벤트 위임 기술을 사용할 수 있습니다 :

$('#aStaticParentElement').on('click', '.hideAndShow', function() { 

을하거나 대체하는 요소의 텍스트 내용을 대신 변경 :

$('.hideAndShow').on('click', function() { 
    $(this).text(function(_, currentText) { 
     return currentText === '[ + ] Show' 
       ? '[ - ] Hide' 
       : '[ + ] Show'; 
    }); 
});