AddClass / RemoveClass问题

Question

单击A类按钮，将A类替换为B类。单击B类按钮，我需要执行操作。

正确申请/删除课程但由于某种原因它不会选择B级？

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

fiddle

Answer 1

如果使用事件委派而不是直接绑定，最简单的解决方案：

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

最佳解决方案是直接绑定click事件并检查当前类：

$(".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 2

使用单个事件绑定来处理这两个操作。

$(".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!");
    }
});

Answer 3

使用事件委派。还添加了分号：

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