ob_start（） - Jquery Load logic

Question

私は、AJAXを使用してページを動的に取得するシステムで作業しています。ページはそう（index.phpを）のようにフェッチされます：

#contentコンテナ（index.phpを）のdiv要素のIDです

//Call destructor if any... 
//This is defined in the page that we request 
if (window.MyModule) 
{ 
    window.MyModule(); 
    delete window.MyModule; 
    window.MyModule = undefined; 
} 


$('#content').load('requestHandler.php', {'val': index 
             }, 
             function() 
             { 
             $('#content').fadeIn(); 
             }); 

：表示しようとしている

<div class="container-fluid" id="content"> 
    Content comes here as we click on different hyperlinks... 
</div> 

ページphp-scriptのrequestHandler.phpによって返され、indexを取得して正しいページを探します。 ハイパーリンクを1回クリックすると正常に動作します。ハイパーリンクを2回以上クリックすると、ページ上のさまざまなクリックイベントの複数のイベントハンドラが終了します。私はここで見つけるの例を見てきた

<ul id="report" class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
    <a class="nav-link active" id="home_tab" data-toggle="tab" href="#home" role="tab">Home</a> 
    </li> 
</ul> 


<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home" role="tabpanel"> 
     <div class="row"> 

      <div class="col-md-4 text-center"> 
      </div> 

      <div class="col-md-4"> 
       <div id="line_header" style="visibility: hidden;"> 
        <h1 class="display-4 text-center cliente">Linjevalg</h1> 
         <div class="list-group" id="route_list" style="overflow-y: auto;"> 

         </div> 
       </div> 
      </div> 

      <div class="col-md-4 text-center"> 

      </div> 
     </div> 
    </div> 

</div> 


<script> 

     window.MyModule = (function() 
     { 

      var value = undefined; 

     $(document).on("click", "#route_list .list-group-item", function() 
     { 
      //Handle click event in here 
      console.log("We are handling this!"); 
     }); 


     function destructor() 
     { 
      $("#route_list .list-group-item").off('click'); 
     } 

     return destructor; 

     })(); 
</script> 

：Can dynamically loaded JavaScript be unloaded?私は新しいページ（home.php）を要求する前に このため私は、そうのように見える、私はフェッチページのデストラクタ関数を実行します。

しかし、私がクリックイベントを発生させるのは、デストラクタ関数を呼び出しても、同じページと同じ時間が発生します。 これは、同じDIV idが複数回割り当てられているため（同じページがレンダリングされるため）、div IDについて既に知っているので、すべてのクリックイベントハンドラが呼び出されるということですか？ページは、（requestHandler.php）からコンテンツを返すことによってロードされた方法により、次のとおりです。

ob_start(); 
    include indexToPageName(index); 
    return ob_get_clean(); 

彼らはPHPコードが含まれているため。

ありがとうございました！

Answer 1

あなたがロードするすべての新しいファイルにクリックハンドラをバインドする必要はありません。あなたがイベントの委任を使用したよう：

$(document).on("click", "#route_list .list-group-item", function() { 
    ... 
} 

あなたは一度だけこれを実行する必要があると#route_list .list-group-item項目のすべてのクリックは正しくクリックハンドラをトリガします。

クリックハンドラをindex.phpに移動すると、問題を解決し、保守しなければならないコードの量を減らすことができます。

Answer 2

私はこのようなことをしようとしていると思います。要素をクリックするたびに、それ自身のコンテンツを持っていかなければならないということですか？ 「これ」でクリックしているものをトラッキングすることができます。

$(document).ready(function() { 
 
    $(document).on("click", ".linking", function(){ 
 
    \t console.log(this); 
 
    console.log($(this).html()); 
 
    //Handle click event in here 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul>   
 
    <li class="linking">Home</li> 
 
    <li class="linking">About</li> 
 
    <li class="linking">Contack</li> 
 
</ul>