javascript - 使用jQuery通过添加/删除类来控制点击事件

Question

我目前正在运行类似以下代码：

function blah() {
jQuery(".class1").on("click", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
   //more stuff here
    jQuery(".class2").on("click", function() {
           jQuery(this).removeClass("class1");
           //More stuff here

这很糟糕，因为点击事件会传播，每次发生的点击都会多次添加点击事件。我尝试关闭第一个选择器（像这样）并单独设置点击事件，但第二个点击事件从未发生（！）：

function blah() {
jQuery(".class1").on("click", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(".class2").on("click", function() {
           jQuery(this).removeClass("class1");
           //More stuff here

我如何构造代码，以便在第一次单击时发生一件事，第二次单击时发生另一件事，而单击事件不会加倍

Answer 1

你需要

jQuery(document).on("click", ".class1", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(document).on("click", ".class2", function() {
           jQuery(this).removeClass("class1");
           //More stuff here
});

演示：小提琴