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加载逻辑

回答

相关问题