Javascript 更改类元素不会'；t停止。单击事件停止工作

我有10个元素，类名为“英雄”。我用jQuery“.click”事件使它们可以点击。单击它们之后，我让它们使用“.attr”函数更改类名。他们确实这样做了，当我检查他们时，他们把他们的类名改为“fixheroes”

但是，这并不能阻止“.click”事件继续在其上运行。我不想那样

您可以在此处找到代码：

jQuery/JS

var counter = 1;
var picked = ["0", "0", "0", "0", "0", "0", "0"]

$(".heroes").click(function(e) {


    var id = this.id;
    var heroInt = id.substring(1, 3);

    picked[counter] = heroInt;




    var left = ["0", "21.5%", "32.9%", "44.3%", "55.7%", "67.1%", "21.5%", "32.9%", "44.3%", "55.7%", "67.1%"];


    $("#" + id).attr('class', "fixheroes fix" + heroInt);


    var h0 = document.getElementsByClassName('h0');
    var fixnow = document.getElementsByClassName("fix" + heroInt);
    fixnow[0].style.left = left[heroInt];

    if (heroInt > 5) {
        fixnow[0].style.top = (h0[0].offsetHeight + h0[0].getBoundingClientRect().top)



    } else {
        fixnow[0].style.top = "10%"

    }


    var ani = ".fix" + heroInt;



    if (counter == 1) {
        $(ani).animate({

            top: "5%",
            left: "3%",

        }, 1000, function() {});
    }

    if (counter == 2) {
        $(ani).animate({

            left: "85.6%",
            top: "5%",

        }, 1000, function() {});
    }
    if (counter == 3) {
        $(ani).animate({

            left: "3%",
            top: "35%",

        }, 1000, function() {});
    }
    if (counter == 4) {
        $(ani).animate({

            left: "85.6%",
            top: "35%",

        }, 1000, function() {});
    }
    if (counter == 5) {
        $(ani).animate({

            left: "3%",
            top: "65%",

        }, 1000, function() {});
    }
    if (counter == 6) {
        $(ani).animate({

            left: "85.6%",
            top: "65%",

        }, 1000, function() {});
    }



    counter += 1;


});

CSS:

HTML:

我制作了一个测试函数，该函数使用此方法：

那么，我的代码有什么问题？

处理程序“.click（）”绑定到元素本身，而不是类选择器。你可以用几种不同的方法让它停止工作

在更改类之前，还要删除处理程序：

$（“.heromes”）。关闭（“单击”）

将处理程序放在父级而不是子级上：

$（“#parentdiv”）。打开（“单击”，“英雄”，函数（）{}）

“.click（）”处理程序绑定到元素本身，而不是类选择器。你可以用几种不同的方法让它停止工作

在更改类之前，还要删除处理程序：

$（“.heromes”）。关闭（“单击”）

将处理程序放在父级而不是子级上：

$（“#parentdiv”）。打开（“单击”，“英雄”，函数（）{}）

---

这是因为在绑定事件时，它会根据选择器条件绑定到DOM节点。绑定后，事件侦听器将始终处于活动状态，除非将其删除。在这种情况下，click事件处理程序绑定到DOM ready上的所有

.heroes

元素，即使更改了它们的类，这些DOM节点也将绑定click事件

要考虑动态类更改（以便类中的更改将“删除”事件处理程序），只需将click事件处理程序绑定到更高级别的父级（或

文档

对象）。老实说，我认为这是我解决您问题的方法，而不必经历混乱的

unbind（）

或

off（）

方法

$(document).on('click', '.heroes', function(e) { ... }

.on（）

事件将自动筛选来自具有类

heroes

的任何子节点的单击事件。因此，如果类被动态更新，这个技巧仍然有效同样，这就是为什么建议使用过滤选择器将事件绑定到动态添加的元素上的原因。在本例中，我们不是动态更改类，而是寻找动态添加的元素

这是您的最新小提琴，只需更改一行：

此外，对于最小的示例，相同的修复也同样有效：

$（文档）.on（'click'，'test'，函数（e）{
log（'classchangedtotest2'）；
$（“.test”）.attr（'class'，“test2”）；
});
.test{
位置：绝对位置；
高度：200px；
宽度：200px；
背景色：红色；
}
.test2{
位置：绝对位置；
高度：200px；
宽度：200px；
背景颜色：蓝色；
}

点击我
这是因为当绑定事件时，它会根据选择器条件绑定到DOM节点。绑定后，事件侦听器将始终处于活动状态，除非将其删除。在这种情况下，click事件处理程序绑定到DOM ready上的所有
.heroes
元素，即使更改了它们的类，这些DOM节点也将绑定click事件

要考虑动态类更改（以便类中的更改将“删除”事件处理程序），只需将click事件处理程序绑定到更高级别的父级（或
文档
对象）。老实说，我认为这是我解决您问题的方法，而不必经历混乱的
unbind（）
或
off（）
方法

$(document).on('click', '.heroes', function(e) { ... }

.on（）
事件将自动筛选来自具有类
heroes
的任何子节点的单击事件。因此，如果类被动态更新，这个技巧仍然有效同样，这就是为什么建议使用过滤选择器将事件绑定到动态添加的元素上的原因。在本例中，我们不是动态更改类，而是寻找动态添加的元素

这是您的最新小提琴，只需更改一行：

此外，对于最小的示例，相同的修复也同样有效：


$（文档）.on（'click'，'test'，函数（e）{
log（'classchangedtotest2'）；
$（“.test”）.attr（'class'，“test2”）；
});
.test{
位置：绝对位置；
高度：200px；
宽度：200px；
背景色：红色；
}
.test2{
位置：绝对位置；
高度：200px；
宽度：200px；
背景颜色：蓝色；
}

点击我
在运行代码时立即添加一次单击处理程序。现在，无论您对该元素做了什么，它都将永远听到对该元素的单击

当你说
$（“.heros”）.click
时，你并不是说“仅在具有
.heros
类的事物上触发click事件”。您的意思是“立即向所有具有
.heroes
类的对象添加单击事件。”

我修复它的方法是添加
$（这个）添加到函数的开头，以删除单击处理程序。
在运行代码时立即添加一次单击处理程序。现在，无论您对该元素做了什么，它都将永远听到对该元素的单击

当你说
$（“.heros”）.click
时，你并不是说“仅在具有
.heros
类的事物上触发click事件”。您的意思是“立即向所有具有
.heroes
类的对象添加单击事件。”

我修复它的方法是添加
$（这个）到函数t的开头
$(document).on('click', '.heroes', function(e) { ... }