0

私は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 を警告し、クラスと色が変更されます。

問題: 2 回目と 3 回目にクリックすると、ID が再度警告されますが、そうすべきではありません。クラスが変わるから。それで、問題は何ですか？

4

1 に答える 1

9

あなたのコード:

  1. セレクターに一致するすべての要素を検索します
  2. これらの要素にイベント ハンドラーをバインドします。

クラスを削除すると、セレクターは一致しなくなりますが、イベント ハンドラーは既に要素にバインドされています。

委任されたイベント ハンドラーを使用する必要があります (イベント ハンドラーが呼び出されるたびに、ターゲット要素が使用しているセレクターと一致することを確認します)。

例えば：

$(document).on('click', '.x', function () {
  $(this).removeClass('x');
  alert('x');
});
于 2013-08-19T13:47:05.137 に答える