Question

我正在使用AJAX动态获取页面的系统。页面的提取方式如下（index.php）：

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

其中#content是容器的div ID（index.php）：

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

但无论我做什么，即使我调用析构函数，click事件也会触发与请求相同页面相同的次数。这是否意味着由于多次分配相同的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

我认为你正在尝试做这样的事情。每当你点击元素它必须带来它自己的内容？你可以通过＆＃34;这＆＃34;。

来搜索你点击的内容

＆＃13;

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

＆＃13;

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

＆＃13;

ob_start（） - Jquery加载逻辑

2 个答案: