jQueryのPJAXでは「$(document).off～」は必須でしょうか？

Question

PJAXの考え方を教えて頂けませんでしょうか。

自分なりに調べてPJAXは実装できたのですが疑問があります。

それは「$(document).off～」は必須かという疑問です。

##ご質問したいこと
まずページ遷移後にクリックイベントを適用するためには、こう↓ではなくて、

$('button').click(function() {
});

こう↓しなければなりませんよね？

$(document).on("click","button", function(){ 
});

しかし後者ではページ遷移後に前ページのイベントが残っていて重複してしまうため、こう↓してoffが必須ですよね？

$(document).off("click","button");
$(document).on("click","button", function(){ 
});

ということはつまり、

PJAXの実装における、clickやchangeなどすべてのイベントでは、例外なく、このように↓して、offを頭につける形式にしなければならない。という理解でよろしいでしょうか？

$(document).off("click","button");
$(document).on("click","button", function(){ 
});

$(document).off("change",".checkbox");
$(document).on("change",".checkbox", function(){ 
});

何か例外や注意点などございましたら教えてほしいと思って、ソースコードというほどではないのですが、こちらで質問させて頂きました。

または、いちいちすべてにoffをつけなくても、もっと効率的な方法などがあれば併せて教えて頂けましたら幸いです。

素人質問ですみませんが、どうぞ宜しくお願い致します。

Comments

[m.ts10806]

回答してしまってはいるのですが、offをセットしないことで何か不都合なこと、不具合が起きているのでしょうか？

[massuguda]

遅くなりました。ご回答ありがとうございます。
不都合なことはイベントの重複です。
イベントを削除しないと、２周目のイベント発生時にcookieが削除されてしまいまして（なんででしょう？）、その不都合からイベント削除の必要性を感じ質問させて頂きました。

[m.ts10806]

追加情報であれば質問編集して追記してください

Answer 1

試してませんが、処理終了後にoffにするように関数化して引数渡すとかはどうでしょうか。

$(document).on("click","button", function(){ 
  //処理
  event_off("click","button");
});
$(document).on("change",".checkbox", function(){ 
  //処理
  event_off("change",".checkbox");
});

function event_off(ev,sel){
  $(document).off(ev,sel);
}

あと、イベントもセレクタも複数指定できるので下記とか（ちょっと挙動怪しいかも・・・）

$(document).off("click change","button,.checkbox");

考え方とかは下記の記事が参考になるかもしれません。

• pjax第3回 「pjaxでのイベント処理」

イベント付与とイベント削除

イベントの付与に関してはどんな製作においても必ず使ってらっしゃるでしょう。
ではイベントの削除は？
多くの方が使用したことがないのではないでしょうか？
通常のサイトであればページを移動すればすべてリフレッシュされるので当然でしょう。
しかし、pjaxサイトではほぼ必須です。

offの効率化については記事内の「少し高度な使用方法」が参考になるかもしれませんね。

Comments

[massuguda]

ご回答誠にありがとうございます。イベントの最後にそれをoffにする関数、いいですね。リンク先のような一括化の方法は少し難易度が高いので、ご提示頂いた方法で進めてみたいと思います。

[退会済みユーザー]

一回しか処理しないなら one のほうでよくね