jquery - イベントハンドラーを複数回添付するのを防ぐ方法は?

Question

clickイベントハンドラーを要素にアタッチする関数があります。

function attachClickToElem() {
    $('.elem').on('click', function () {
        alert('Hello World');
    });
}

問題は、この関数を呼び出すたびに nclickハンドラーが要素にアタッチされるため、2 回呼び出すとalert、要素をクリックすると 2 つ取得されることです。

$(function () {
    attachClickToElem();
    attachClickToElem();
});

どうすれば防ぐことができますか？そして、私の要素がすでにclickハンドラーを持っているかどうかを確認しますか?

ここにフィドルがあります

Answer 1

試す

function attachClickToElem() {
    $('.elem').off('click.mytest').on('click.mytest', function () {
        alert('Hello World');
    });
}

$(function () {
    attachClickToElem();
    attachClickToElem();
});

デモ:フィドル

別の方法

function attachClickToElem() {
    $('.elem').filter(function(){
        return !$(this).data('myclick-handler');
    }).on('click.mytest', function () {
        alert('Hello World');
    }).data('myclick-handler', true);
}

$(function () {
    attachClickToElem();
    attachClickToElem();
});

デモ:フィドル

Answer 2

動作中のjsFiddleデモ

メソッドを使用.each()して要素をループし、メソッドで既にイベント ハンドラー のフラグ.data()を確認します。フラグが の場合はtrue、現在のループをスキップします。それ以外の場合は、イベント ハンドラーを要素にアタッチし、フラグを として設定しtrueます。

function attachClickToElem() {
    $('.elem').each(function () {
        var $elem = $(this);

        // check if event handler already exists
        // if exists, skip this item and go to next item
        if ($elem.data('click-init')) {
            return true;
        }

        // flag item to prevent attaching handler again
        $elem.data('click-init', true);

        $elem.on('click', function () {
            alert('Hello World');
        });
    });
}

---

参考文献:

• .each()- jQuery API ドキュメント
• .data()- jQuery API ドキュメント

Answer 3

私が信じているこれに近いもの：

function attachClickToElem() {
    $('.elem:not(.has-click-handler)')
        .addClass('has-click-handler')
        .on('click', function () {
          alert('Hello World');
    });
}