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 '而不是'点击'，以便您可以使用动态添加的元素。

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

希望有所帮助

jQuery Button更改无法正常工作

2 个答案: