質問: 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をつけなくても、もっと効率的な方法などがあれば併せて教えて頂けましたら幸いです。 素人質問ですみませんが、どうぞ宜しくお願い致します。
回答: 試してませんが、処理終了後に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の効率化については記事内の「少し高度な使用方法」が参考になるかもしれませんね。