javascriptの削除について

Question

###前提・実現したいこと
pjaxというjqueryライブラリで非同期通信のページを作っています。

###発生している問題・エラーメッセージ

pjaxでコンテンツの差し替えを行っているのですが、各ページ毎の読み込み時に発生するjavascriptの動作を停止することが出来ず困っています。HTMLは書き換えられるのですが、jsはバックグラウンドで動作したままページ遷移ごとに溜まっていき、みるみる動作が重くなっていきます。
コンテンツの差し替えと共にjsも初期化する方法を模索しているのですが、なにかよい解決策はありますでしょうか。
よろしくお願いします。

###該当のソースコード

$(document).on('pjax:end', function() {
	init();
});

pjax読み込み完了時にinit()という関数を実行し

$(document).on('click', '.stop', function() {
    init = function(){
        return false;
    }
});
このように無効にしてみたのですが、再度同ページを開くとjsが動作しません。

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)

Comments

[sublimer]

```で囲うのはソースコードだけにしてください。

[rnosh]

全体的に情報不足だと思います。init()の処理で何が起こっているかも全くわからないですし、もう少し詳しく記載したほうが求める回答が来るかもしれませんよ

Answer 1

まず端的に言いますと、pjaxとJavaScriptを正しく共存させるには、それに合わせたJavaScriptの設計を行う必要があります。

たとえば、ページごとにJavaScriptやCSSが違えば、せっかくpjaxで遷移してもメチャクチャな表示になるだけですので、全ページでJavaScript/CSSファイルを統一することがおすすめです。

そして、ページ内のエレメントに仕掛けるJavaScriptについては、ページ遷移のたびごとに、正しいページか確認しつつセットする必要がありますが（pjaxでエレメントが消えればイベントごと消えてくれます）、グローバルに適用するものについては最初のロード時だけ適用すれば十分です。また、windowにセットしないと動かないscrollやresizeなどのイベントについては、多重にセットしてしまわないように注意が必要です。

Rails開発で、似たようなTurbolinksを使っていますが、複雑なJavaScriptを組んだページを正しく動かすにはかなりの技量が必要です。