weixin_33737774 2017-02-10 07:38 采纳率: 0%
浏览 23

ob_start()-jQuery加载逻辑

I'm working on a system that fetches pages dynamically using AJAX. The pages are fetched like so (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();
                                      });

Where #content is the div ID of the container (index.php):

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

The pages that are going to be displayed is returned by the php-script requestHandler.php which takes the index and looks up the right page. This works fine if I click a hyperlink once. If I click the hyperlinks twice or more than that I end up with multiple event handlers for the different click events on the page. Due to this I run the destructor function on the page I fetch which look like so, before I request a new page (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>

I have been looking at the examples found here: Can dynamically loaded JavaScript be unloaded?.

But whatever I do the click event fire the same amount of times as the same page is requested even if I call the destructor function. Does this mean that since the same DIV id is assigned multiple times (due to that the same page is rendered) all click-event handlers will be invoked since it already knows about the div ID? The pages are by the way loaded by returning the content from (requestHandler.php):

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

since they contain PHP-code.

Thanks for any help or guidance!

  • 写回答

2条回答 默认 最新

  • weixin_33739646 2017-02-10 08:03
    关注

    I think you are trying to do something like this. that whenever you click element it has to bring it's own content? You can trak what are you clicking by "this".

    $(document).ready(function() {
      $(document).on( "click", ".linking", function(){
        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>

    </div>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 u盘问题:盘符不显示 无媒体
  • ¥50 R语言读取nc按月均值转为tif
  • ¥30 智能车串级pid调参
  • ¥15 visual studio code翻译老是错误
  • ¥20 卫星测高数据的高程转换
  • ¥15 爬取招聘网站数据信息
  • ¥15 安装完tensorflow,import tensorflow as tf后报错,如何解决?
  • ¥15 ultralytics库导出onnx模型,模型失去预测能力
  • ¥15 linux下点对点协议连接2个USB串口的硬件流量控制问题
  • ¥15 SQL数据自动生成问题