1

簡単なコードがいくつかあります。私はを使用してJqueryいます。特定のクラスが割り当てられた2つの要素があります。それらの1つにもクラスが割り当てられb1ます。

クラスb1にはonclickプロパティが付加されています。

ここで、クリックするとすべての要素からクラスb1を削除しようとするボタンを配置します。しかし、その後もクリック機能がアクティブになっていることがわかります。

誰か説明してもらえますか？jsfiddleにコードがあります

CSSプロパティのみが追加されることを確認しました。これらの要素に関連付けられたjavascriptイベントは発生しません。

<body>
    <table>
        <tr>
            <td class="a b1" id="cell1">Cell 1</td>
            <td class="a b2" id="cell2">Cell 2</td>
        </tr>
    </table> <a href="#" id="click1">Remove B1 </a>
    <br/>
</body>

<script>
    $(document).ready(function() {

    $(".b1").click(function () {

            alert("B1");

        });

        $("#click1").click(function () {
            alert("removed b1");

            $(".a").removeClass('b1');
              alert("removed b1 from all elements. ");

    //even after executing this statment - the onclick still remains active.

        });
    });
</script>
4

3 に答える 3

2

onclickセレクターに一致する要素にイベントハンドラーをアタッチしています。セレクターは要素のコレクションを取得してそれらに適用するだけであり、イベントハンドラーをクラスに適用することはできません。

このようなことを実行して、クラスが存在する場合にのみハンドラーを実行できます。

$(".b1").click(function () {
    if ($(this).hasClass('b1')) {
        alert("B1");
    }
});
于 2013-03-24T08:04:26.793 に答える
2

$(".b1")要素を返し.click()、要素自体にイベントハンドラーをアタッチします。セレクターは「動的」ではありません。あなたが探しているのはイベントの委任です：

$('table').on('click', '.b1', function() {
    ...
});

これにより、イベントハンドラーが要素にアタッチさtableれ、そのセレクターに一致する子要素にイベントハンドラーが委任されます。

于 2013-03-24T08:05:19.230 に答える
1

このインスタンスでJavaScriptがどのように機能するかは、ドキュメントの準備ができたら、適切なDOMオブジェクトにリスナーを追加します。（したがって、この場合、ドキュメントの読み込みが完了した時点で、クラスb1を持つすべてのタグにクリックリスナーが追加されます）。ドキュメントの読み込みが完了した後でクラスを変更しても、リスナーは元のタグを探します。

現在選択されている要素でのみ関数を実行するには、on（）関数を試してください。

于 2013-03-24T08:11:39.597 に答える