ob_start（） - jquery加載邏輯

我正在研究一個使用AJAX動態獲取頁面的系統。該頁面被取像這樣（的index.php）：ob_start（） - jquery加載邏輯

//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(); 
             });

哪裏＃內容是容器（的index.php）的DIV ID：要顯示

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

那些即將頁面由PHP腳本requestHandler.php返回，該腳本獲取索引並查找正確的頁面。這工作正常，如果我點擊超鏈接一次。如果我點擊超鏈接兩次或更多，我最終會得到頁面上不同點擊事件的多個事件處理程序。由於這一點，我跑的頁面我取的樣子等等析構函數，我要求一個新的頁面（home.php）前：

<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?。

但無論我做什麼，點擊事件的觸發次數與請求相同頁面的次數相同，即使我調用析構函數。這是否意味着由於相同的DIV ID被分配了多次（由於同一頁面被渲染），所有的點擊事件處理程序都會被調用，因爲它已經知道了div ID？頁面順便加載（requestHandler.php）：

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

因爲它們包含PHP代碼。

感謝您的任何幫助或指導！

來源

2017-02-10 Araw

JavaScript的塊如何相關？在我看來，你只需要點擊處理程序和加載部分，其餘部分是不必要的。 – jeroen

@ jeroen：謝謝你的回覆。頂部的javascript代碼是位於index.php中的javascript（始終顯示的頁面）。所以當用戶點擊一個JavaScript代碼塊被激發的超鏈接時。它將請求的頁面加載到內容div中。所以上面的前兩個代碼塊是相關的，而第三個是所請求的頁面。希望回答你的問題。 – Araw

那麼'window.MyModule'部分在'index.php'加載的頁面中？如果是這樣的話，你應該把它移動到'index.php'，因爲不需要加載多次。 – jeroen

無需綁定在您加載每一個新的文件點擊彎。當您使用事件委派：

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

你只需要執行一次這一點，並在#route_list .list-group-item項目的所有點擊將正確地觸發你的點擊處理程序。

因此，通過將點擊處理程序移動到index.php，您可以解決問題並減少必須維護的代碼量。

來源

2017-02-10 08:17:13 jeroen

我認爲你正在嘗試做這樣的事情。只要你點擊元素，它必須帶來它自己的內容？你可以trak什麼你點擊「這個」。

$(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>

來源

2017-02-10 08:03:46

ob_start（） - jquery加載邏輯

回答

相關問題