Question

页面完全加载后，我无法为延迟加载的内容加载JS脚本。

请输入我的代码

/*JS Which Runs on LoadMore button Clicks*/

$.ajax({
        method :'GET',
        url: baseUrl+'ajaxcontroller/Load_Categories_To_View',
        success:function(data){
        $('#searchResults').append(data);
        //scriptLoader('#scripts');
        $('#loadingImage2').hide();
        },
        complete: function(){
        $('#loadingImage2').hide();
         $("#loadMore").show();
        },
        error:function (xhr, ajaxOptions, thrownError)    {alert(thrownError);}
        });

<!-SEARCH RESULTS PAGE-->

<!doctype html>
<html lang="en">
<head>
	
</head>
 <body>
 

  	<section class="content">
    	<section class="block">
      	<div class="container">
        <!----------------------------------------------Ads---------------------------------------------------->
        <?php if(!empty($headerdata[0]['homepageAds720x90']) && $headerdata[0]['enable_ads']==1){ ?>
        <section class="block" align="center">
             <?php $this->load->view('ads/homepageAds720x90'); ?>
        </section>
        <?php }?>
        <!------------------------------------------------------------------------------------------------------>

        <!-------------------------------------------Search Product Page---------------------------------------->
        <div id="loadingImage" align="center" style="display:none;"> <img src="<?php echo base_url();?>assets/img/loadingimage.gif"/> </div>
        <div id="searchResults"><div id="scripts"></div></div>
        <div id="loadMore" style="">
          <a href="#"><?php echo $this->lang->line('loadmore_btn'); ?></a>
        </div>
        <!-------------------------------------------------------------------------------------------------------->

        </div>
    	</section>
	  </section>

	</div>
  <div id="backtop">&#9650;</div>

<!----------------------------------------------Page Scripts---------------------------------------------------------> 
<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!------------------------------------------------------------------------------------------------------------------->

</body>
</html>

正如我通过代码显示的那样，它将加载第一组结果，然后将有一个loadMore按钮，用户必须单击该按钮才能加载下一组结果。

一切正常，但问题是当用户单击SEARCH RESULTS PAGE中的LoadMore按钮时，JS脚本也会加载，每次用户单击LoadMore按钮时，这些脚本都会重复。但是我可以轻松地从搜索结果页面中删除以下脚本，但是对于延迟加载的内容，所有页面功能均不起作用。因为要运行这些功能，每次用户单击LoadMore按钮时都应加载lazyloadcontrols.js。

<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

所以我的问题是，有什么办法可以将这些JS脚本加载到我的主搜索页面上，并将它们用于以后用户单击LoadMore Button时要加载的内容？基本上，我有什么方法可以将这些JS脚本应用于整个页面，而不必每次用户加载结果时都重复它们？

预先感谢

Answer 1

我认为你

<script src="<?php echo base_url();?>assets/js/lazyloadcontrols.js"></script>

应在下方添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

加载延迟加载内容所需的JS脚本

1 个答案: