jQuery按鈕更改不起作用

Question

我正在嘗試為按鈕提供新的內容（如果已單擊）。 我還添加了新類。 第一次單擊就可以很好地完成這項工作，但是由於某些原因，第二次單擊后，innerhtml不會更改。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

您應該使用' on '而不是' click '，以便可以使用動態添加的元素。

$('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

將您的代碼包裝在$（function（）{}）中，即$（document）.ready（function（）{}）;，除此之外，一切都很好

無需每次單擊都更新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');
    }
  });
});

希望能幫助到你