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

總結你的代碼$（函數（）{}），這是$（文件）。就緒（函數（）{} ）;,除了這每一件事情是罰款

有沒有必要每次點擊時更新html，你需要做的就是添加和刪除必要的類。

對於第一個點擊，你要刪除隱形類和什麼如果點擊下一次，它會嘗試再次刪除隱形類，這是不存在的，在這裏拋出一個錯誤，你應該使用toggleClass

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

希望它可以幫助