jQuery 버튼이 작동하지 않습니다.

Question

버튼을 클릭하면 새로운 콘텐츠를 제공하려고합니다. 나는 또한 새로운 수업을 추가한다. 그 작업의 완벽하게 정상적으로 첫 번째 클릭에 있지만, innerHTML을 그것에 두 번 클릭 한 후 변경 ins't 어떤 이유로 .. HTML :

<button class="btn btn-warning btn-invisible"><i class="fa fa-eye-slash"></i></button> 

jQuery를 :

$('.btn-invisible').click(function() { 
    $(this).removeClass('btn-invisible'); 
    $(this).addClass('btn-visible'); 
    $(this).html('<i class="fa fa-eye"></i>'); 
});    

$('.btn-visible').click(function() { 
    $(this).removeClass('btn-visible'); 
    $(this).addClass('btn-invisible'); 
    $(this).html('<i class="fa fa-eye-slash"></i>'); 
}); 

나는이 바이올린을 가지고 준비 : https://jsfiddle.net/dthee9w6/7/

누군가가 도울 수 있으면 좋아할 것입니다.

Answer 1

당신은 대신 '클릭'의 '에 '를 사용한다 도움이되기를 바랍니다.

$('body').on('click','.btn-invisible',function() { 

    $(this).removeClass('btn-invisible'); 

    $(this).addClass('btn-visible'); 
    $(this).html('<i class="fa fa-eye"></i>'); 
});    

$('body').on('click','.btn-visible',function() { 


    $(this).removeClass('btn-visible'); 

    $(this).addClass('btn-invisible'); 
    $(this).html('<i class="fa fa-eye-slash"></i>'); 
}); 

희망 하시겠습니까?

Answer 2

$에 코드를 랩 (함수() {}) $ 인은 (문서) .ready (함수() { 은});이 외에도에서 모든 것은 괜찮

필요가 없습니다 클릭 할 때마다 html을 업데이트하려면 필요한 클래스를 추가하고 제거해야합니다. 첫 번째 클릭에 대한

, 당신은 눈에 보이지 않는 클래스와 하나가 다음을 클릭 한 경우 무엇을 제거하는, 당신은

$(function() { 
    $('.btn-invisible').click(function() { 

    $(this).toggleClass('btn-invisible'); 

    if (!$(this).hasClass('btn-visible')) { 

     $(this).addClass('btn-visible'); 
     $(this).find('.fa').removeClass('fa-eye-slash').addClass('fa-eye'); 
    } 
    }); 

    $('.btn-visible').click(function() { 

    $(this).toggleClass('btn-visible'); 

    if (!$(this).hasClass('btn-invisible')) { 

     $(this).addClass('btn-invisible'); 
     $(this).find('.fa').removeClass('fa-eye').addClass('fa-eye-slash'); 
    } 
    }); 
}); 

toggleClass를 사용해야합니다, 그것은 여기에서 오류가 발생,이하지 않은 다시 보이지 않는 클래스를 제거하려고

은 당신이 동적으로 추가 요소를 재생할 수 있도록