AddClass / RemoveClass问题

在单击A类按钮时，将A类替换为B类。单击具有BI类的按钮需要执行操作。

它正确地应用/删除了类，但由于某种原因它不会选择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!') }) 

小提琴

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