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

希望它可以帮助