Question

我有一个html页面。这是代码：

<script src="jquery-1.10.1.min.js"></script>
<script>
$('document').ready(function(){
    $(".class-1").click(function(){
        id=this.id;
        alert(id);
        $("#"+id).removeClass("class-1");
        $("#"+id).addClass("class-2");
    });
});
</script>

<style>
.class-1{color:red;}
.class-2{color:blue;}
</style>

<div class="class-1" id="id-1">sth</div>

当我第一次点击div时，页面会提醒id，类和颜色会发生变化。

问题：当我第二次和第三次点击它时，它会再次提醒id，但它不应该。因为班级改变了。那么问题是什么？

Answer 1

您的代码：

查找与选择器匹配的所有元素
将事件处理程序绑定到这些元素

删除类时，选择器不再匹配，但事件处理程序已绑定到元素。

您需要使用委托事件处理程序（它检查目标元素是否与每次调用事件处理程序时使用的选择器匹配）。

例如：

$(document).on('click', '.x', function () {
  $(this).removeClass('x');
  alert('x');
});

按类名选择动态更改的元素

1 个答案: