jQuery call different function when buttons class has changed

Question

I'm a little stuck on the follow issue. I have a webpage that has a button when clicked it does some ajax things and if the result/response of that is successful then the buttons class is changed.

What I then want, if that changed button is clicked again, I want it to call a different function.

The first part works no problem. The ajax is called and the buttons class is changed so the colour and text of the button is changed. But when click the button again, I want to call the .btn.off function, but it remains to call the .btn.on function while I would have hoped it would call the .btn.off function.

Unfortunately, my knowledge of jQuery is not the best, any help in the right direction would be very much appreciated.

Thank you so much.

    <button type="button" class="btn on btn-danger"  id="123"><i class="fa fa-trash-o"></i><span>On</span></button>&nbsp;



    <script>
        $(document).ready(function(){

            $(".btn.on").click(function(){
                //do some ajax stuf.....
                $(this).removeClass('btn on btn-danger').addClass('btn off btn-success btn-sm');
                $("span", this).text("Off");                           
            });


            $(".btn.off").click(function(){     
                //do some ajax stuf.....
                $(this).removeClass('btn off btn-danger').addClass('btn on btn-danger btn-sm');
                $("span", this).text("On");                            
            });             

        });
    </script>

Joy Biswas · Accepted Answer · 2019-09-08 18:28:28Z

2

$('.btn').click(function () {
  var btn = $(this);
  var isOn = btn.hasClass('on');
  if (isOn) {
    // do something maybe call on function or write logic for on
  } else {
    // do something maybe call off function or write logic for off
  }
  btn.toggleClass('on off'); // flip the on <-> off switch
  $('span', this).text(isOn ? 'Off' : 'On'); // was on before toggle so flipped
})

You can do this by checking the classes and take action

edited Sep 8, 2019 at 18:28

answered Sep 8, 2019 at 17:52

Joy Biswas

6,5531 gold badge27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2019-09-08 18:06:15Z

The issue is because you're dynamically changing the classes on the element at runtime. One way to work around this is to use delegated event handlers, like this:

jQuery(function($) {
  $(document).on('click', '.btn.on', function() {
    // AJAX...                
    $(this).removeClass('on btn-danger').addClass('off btn-success btn-sm').find('span').text('Off');
  });
  
  $(document).on('click', '.btn.off', function() {
    // AJAX...
    $(this).removeClass('off btn-danger').addClass('on btn-danger btn-sm').find('span').text('On');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<button type="button" class="btn on btn-danger" id="123">
  <i class="fa fa-trash-o"></i>
  <span>On</span>
</button>

Collectives™ on Stack Overflow

jQuery call different function when buttons class has changed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related