title: PHP jQuery Infinite scroll function is stopping my other jquery script from execution
body: <p>I am using jquery infinite scroll function for loading the records. There are a few problems I am facing. </p>
  
  <ol>
  <li><p>It doesn't work on mobile devices. However, it works on mobile mode on desktop browser but doesn't run on actual mobile device. Data doesn't load when scrolled to bottom.</p></li>
  <li><p>Since I am loading the results from another page in the main page's div, another jQuery script which is responsible for showing more or less text on click isn't working at all. Seems like some cross manipulation happening. It worked fine until I didn't apply infinite scroll as I was loading data on the same page and not from another page. </p></li>
  </ol>
  
  <p>Here are the codes.</p>
  
  <p>timeline.php</p>
  
  <pre><code>&lt;div id="loadMoreData"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>loadscroll.js</p>
  
  <pre><code>(function($) {
    $.fn.loaddata = function(options) {
      var settings = $.extend({
        loading_gif_url: "images/loader.gif", //url to loading gif
        end_record_text: "No more records found!", //no more records to load
        data_url: "processes/loadTimeline.php", //url to PHP page
        start_page: 1 //initial page
      },options);
  
      var el = this;
      loading = false;
      end_record = false;
      contents(el, settings); //initial data load
  
      // $(window).scroll(function(){
      $('body').scroll(function(){
        if($('body').scrollTop() + $(window).height() &gt;= $(document).height()){
          contents(el, settings); //load content chunk
        }
      });
    };
  
    //Ajax load function
    function contents(el, settings) {
      var load_img = $("&lt;img/&gt;").attr("src", settings.loading_gif_url).addClass("loading-image"); //create load image
      var record_end_txt = $("&lt;div/&gt;").text(settings.end_record_text).addClass("end-record-info"); //end record text
      if (loading == false &amp;&amp; end_record == false) {
        loading = true; //set loading flag on
        el.append(load_img); //append loading image
        setTimeout(function(){
          $.post(settings.data_url, { page: settings.start_page }, function(data) {
            //jQuery Ajax post
            if (data.trim().length == 0) {
              //no more records
              el.append(record_end_txt); //show end record text
              load_img.remove(); //remove loading img
              end_record = true; //set end record flag on
              return; //exit
            }
            loading = false; //set loading flag off
            load_img.remove(); //remove loading img
            el.append(data); //append content
            settings.start_page++; //page increment
          });
        }, 500);
      }
    }
  })(jQuery);
  $("#loadMoreData").loaddata();
  </code></pre>
  
  <p>loadTimeline.php</p>
  
  <pre><code>&lt;?php
  session_start();
  if(!isset($_SESSION['dateapplogin'])){
    exit();
  }
  include('../functions.php');
  
  //sanitize post value
  $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
  $item_per_page = 2;
  
  //throw HTTP error if page number is not valid
  if(!is_numeric($page_number)){
    header('HTTP/1.1 500 Invalid page number!');
    exit();
  }
  
  //get current starting point of records
  $position = (($page_number-1) * $item_per_page);
  
  // Fetch User Contents
  $contents = $pdo-&gt;prepare("SELECT * FROM user_content WHERE uc_user = :user ORDER BY uc_id DESC LIMIT $position, $item_per_page");
  $contents-&gt; bindValue(':user', $person);
  $contents-&gt; execute();
  ?&gt;
  &lt;?php while($content = $contents-&gt;fetch()){ ?&gt;
    &lt;div class="media timeline-media-margin"&gt;
      &lt;div class="row"&gt;
        &lt;div class="grid-sizer col-md-12 col-sm-12"&gt;&lt;/div&gt;
        &lt;div class="grid-item col-md-12 col-sm-12 pr"&gt;
          &lt;div class="media-grid"&gt;
            &lt;?php if($content['uc_type'] == 'photo'){ ?&gt;
              &lt;img src="images/post-images/6.jpg" alt="" class="img-responsive post-image" /&gt;
            &lt;?php } if(trim($content['uc_desc']) != ''){ ?&gt;
              &lt;div class="text-container"&gt;
                &lt;div class="content hideContent"&gt;
                  &lt;p&gt;&lt;?php echo $content['uc_desc']; ?&gt;&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="show-more"&gt;
                  &lt;span&gt;Show more&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;?php } ?&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>custom.js: This is the code that isn't getting executed after adding infinite scroll.</p>
  
  <pre><code>// Show Hide Text
    $('.content').each(function(k,v){
      if($(v).text().length &lt; 200){
        $(v).removeClass('hideContent');
        $(v).next().hide();
        $(".content p").css('margin','0px 0px 5px');
      }
    });
  
    $(".show-more span").click(function() {
      var $this = $(this);
      var $content = $this.parent().prev(".content");
      var linkText = $this.text().toUpperCase();
      if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.toggleClass('hideContent showContent');
      }else {
        linkText = "Show more";
        $content.toggleClass('showContent hideContent');
      };
      $this.text(linkText);
    });
  </code></pre>