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

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

你的代码：

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

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

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

例如：

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