jQueryのclickイベントに関してメモ

下記のコードでunbind('click')がない場合、既に$('input[id^=attachmentData]')にclickイベントが宣言されている場合、同じイベントが重複して宣言されてしまう。

$('#elementId').unbind('click').click(function () {
    // 何らかの処理
});

なんでunbind('click')がないとダメか

ダメな例

下記のような初期設定を行うinit関数の中にclickイベントを設定した場合
※SPA開発で一つの画面で詳細画面を切り替えたり、、、

function init(){
    $('#elementId').click(function () {
        // 何らかの処理
        console.log('何らかの処理');
    });
}

1回目の初期設定後(ex) SPAな画面ではじめて詳細画面を開いた)

何らかの処理(clickイベントが1回実行される)

2回目の初期設定後(ex) SPAな画面で2回に詳細画面を開いた)

何らかの処理(1回目に宣言されたclickイベントが実行される)
何らかの処理(2回目に宣言されたclickイベントが実行される)

3回目の初期設定後(ex) SPAな画面で3回に詳細画面を開いた)

何らかの処理(1回目に宣言されたclickイベントが実行される)
何らかの処理(2回目に宣言されたclickイベントが実行される)
何らかの処理(3回目に宣言されたclickイベントが実行される)

これが新しく画面をレンダリングし直すまで永遠に続きます。
当然、正常な処理が出来るはずがないのでこういう作りは駄目です。

もちろん、SPAじゃない作りであれば問題ありません。

正しい例

前提はダメな例と同じです。

function init(){
    $('#elementId').unbind('click').click(function () {
        // 何らかの処理
        console.log('何らかの処理');
    });
}

1回目の初期設定後(ex) SPAな画面ではじめて詳細画面を開いた)

何らかの処理

clickイベントが1回実行される

2回目の初期設定後(ex) SPAな画面で2回に詳細画面を開いた)

何らかの処理

既存のclickイベントは全て無効にされ、2回目に宣言されたイベントのみが実行される

3回目の初期設定後(ex) SPAな画面で3回に詳細画面を開いた)

何らかの処理

既存のclickイベントは全て無効にされ、3回目に宣言されたイベントのみが実行される