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

时间:2013-08-19 13:42:51

标签: javascript jquery html class

我有一个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,但它不应该。因为班级改变了。那么问题是什么?

1 个答案:

答案 0 :(得分:8)

您的代码:

  1. 查找与选择器匹配的所有元素
  2. 将事件处理程序绑定到这些元素
  3. 删除类时,选择器不再匹配,但事件处理程序已绑定到元素。

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

    例如:

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