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を更新するには、必要なクラスを追加して削除するだけです。最初のクリックのために

、あなたは目に見えないクラスと1つは、次の時間をクリックした場合は何を削除している、それはあなたが

$(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を使用する必要があり、それはここでエラーをスローし、そこにされていない再び目に見えないクラスを削除しようとします

は、それはあなたが動的に追加された要素で遊ぶことができるようにあなたは、代わりに「クリック」のに'を使用する必要があり