AddClass/RemoveClass Issues

Question

On the click of button with class A, replace class A with class B. On the click of button with class B I need to perform an action.

It\'s applying/removing the class cor

Answer 1

Use event delegation. Added semicolons, too:

$(document).on('click', ".changebut", function () {
   $("input[type=text]").fadeOut("fast", function () {
      $(".changebut").animate({
           width: "100%"
      }, 200).val("Submit again").removeClass("changebut").addClass("submitbut");
   });
});
$(document).on('click', ".submitbut", function () {
   alert('it worked!');
});

Answer 2

The easiest solution if to use event delegation instead of direct binding :

$(document).on('click', '.changebut', function () {
    $("input[type=text]").fadeOut("fast", function () {
        $(".changebut").animate({
             width: "100%"
         }, 200).val("Submit again").removeClass("changebut").addClass("submitbut")
    });
})

$(document).on('click', '.submitbut', function () {
    alert('it worked!')
})

The best solution is to bind the click event directly and check for the current class :

$(".changebut").on('click', function () {
    if($(this).is('.changebut')){
        $("input[type=text]").fadeOut("fast", function () {
            $(".changebut").animate({
                width: "100%"
            }, 200).val("Submit again").removeClass("changebut").addClass("submitbut")
        });
    }else{
        alert('i have an other class');
    }
})

Answer 3

Use a single event binding that handles both actions.

$(".changebut,.submitbut").click(function () {
   if ($(this).is(".changebut")) {
       $("input[type=text]").fadeOut("fast", function () {
           $(".changebut").animate({
               width: "100%"
           }, 200).val("Submit again").removeClass("changebut").addClass("submitbut")
       });
    } else {
        alert("It worked!");
    }
});