JQuery click same button with different class

Question

I have a button with class name test-button test-button--check. After clicking test-button--check it should do something and be replaced by class test-button--reset

For test-button--reset I want to write another function, but It doesn't work. Because, the previous function executes again.

$(".test-button--check").on("click", function() {
  alert("Check is clicked");
  $(this).removeClass("test-button--check").addClass("test-button--reset");
});

$(".test-button--reset").on("click", function() {
  alert("Reset is clicked");
  $(this).removeClass("test-button--reset").addClass("test-button--check");
});

What can I do?

Thanks

Please add some code to your question - then we can maybe tell you why it doesn't work! — Christian Zosel
– Christian Zosel, Commented Nov 6, 2016 at 17:14

RAUSHAN KUMAR · Accepted Answer · 2016-11-06 18:10:28Z

1

You can write your code inside the document.ready in this way

$(".test-button--check .test-button--reset").on("click", function(e) {
   e.preventDefault();
   var obj=$(this);
   if($(obj).hasClass('test-button--check')){
       alert("Check is clicked");
       $(this).removeClass("test-button--check").addClass("test-button--reset");
   }
   if($(obj).hasClass('test-button--reset')){
       alert("Reset is clicked");
       $(this).removeClass("test-button--reset").addClass("test-button--check");
   }
});

answered Nov 6, 2016 at 18:10

RAUSHAN KUMAR

6,0345 gold badges37 silver badges70 bronze badges

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

Comments

Gigacore · Accepted Answer · 2016-11-06 17:18:13Z

1

Try using .off() to remove an event handler, in this case, it is click.

Should be something like this:

$('.test-button.test-button--reset').off().click(function() {...});

answered Nov 6, 2016 at 17:18

Gigacore

1651 gold badge2 silver badges11 bronze badges

Comments

Tinsten · Accepted Answer · 2016-11-06 18:49:30Z

1

I think this will work:

var check = function checkFunc() {
alert('Check is clicked!');
$(this).addClass('test-button--reset').removeClass('test-button--check');
$('.test-button--reset').unbind('click',check);
$('.test-button--reset').bind('click',reset);
}
var reset = function resetFunc() {
alert('Reset is clicked!');
$(this).addClass('test-button--check').removeClass('test-button--reset');
$('.test-button--check').unbind('click',reset);
$('.test-button--check').bind('click',check);
}
$('.test-button--check').bind('click',check);

Using bind and unbind

edited Nov 6, 2016 at 18:49

answered Nov 6, 2016 at 18:21

Tinsten

3562 silver badges15 bronze badges

Collectives™ on Stack Overflow

JQuery click same button with different class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related