.on('click') と .click() の違い質問する

Question

違いは使用パターンにあると思います。

前者の方がメモリ使用量が少なく、動的に追加された要素に対して機能するため、を.on好みます。.click

次の HTML を検討してください。

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

新しいボタンを追加するには

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

「Alert!」でアラートを表示したいとします。そのためには、「click」または「on」のいずれかを使用できます。

使用する場合は`click`

$("button.alert").click(function() {
    alert(1);
});

上記のように、セレクタに一致する要素ごとに個別のハンドラが作成されます。つまり

一致する要素が多いと、同一のハンドラが多数作成され、メモリ使用量が増加する。
動的に追加されたアイテムにはハンドラーがありません。つまり、上記の HTML では、ハンドラーを再バインドしない限り、新しく追加された「アラート!」ボタンは機能しません。

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

上記では、動的に作成された要素も含め、セレクターに一致するすべての要素に対して単一のハンドラーが作成されます。

Adrien が下記でコメントしているように、使用するもう 1 つの理由は、.on名前空間イベントです。

でハンドラを追加した場合、.on("click", handler)通常はでそれを削除します.off("click", handler)。これにより、そのハンドラが削除されます。明らかに、これは関数への参照がある場合にのみ機能しますが、ない場合はどうなるでしょうか? 名前空間を使用します。

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

解除方法

$("#element").off("click.someNamespace");

Answer 1