CODEWITHSUNDEEP
javascriptjqueryhtml
Bennet G.
Bennet G.

Reputation: 585

jQuery Button changes not working

I'm trying to give the button a new content if it's clicked. I also add new classes. That work's perfectly fine on the first click but for some reason the innerhtml ins't changing after clicking a second time on it.. 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>');
});

I got this fiddle ready: https://jsfiddle.net/dthee9w6/7/

Would love if someone could help.

Upvotes: 0

Views: 43

Answers (2)

Geeky
Geeky

Reputation: 7496

Wrap your code in $(function(){}) ,which is $(document).ready(function(){ });, apart from this every thing is fine

There is no need to update the html each time on the click , all you need to do is add and remove neccessary classes.

For the first click, you are removing invisible class and what if one clicked next time, it tries to remove invisible class again which is not there, it throws an error here,you should use 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');
    }
  });
});

Hope it helps

Upvotes: 0

BugHunter
BugHunter

Reputation: 1204

You should use 'on' instead of 'click', so that you can play with dynamically added elements.

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

hope it helps.

Upvotes: 1

Related Questions