PHP jQuery Функция бесконечной прокрутки останавливает выполнение моего другого скрипта jquery

Question

Я использую функцию бесконечной прокрутки jquery для загрузки записей. Есть несколько проблем, с которыми я сталкиваюсь.

1. Не работает на мобильных устройствах. Тем не менее, он работает в мобильном режиме в настольном браузере, но не работает на реальном мобильном устройстве. Данные не загружаются при прокрутке вниз.

2. Так как я загружаю результаты с другой страницы в div главной страницы, еще один скрипт jQuery, который отвечает за отображение более или менее текста нащелчок не работает вообще. Кажется, что происходит какое-то перекрестное манипулирование. Это работало хорошо, пока я не применил бесконечную прокрутку, поскольку я загружал данные на той же странице, а не с другой страницы.

Вот коды.

timeline.php

<div id="loadMoreData"></div>

loadscroll.js

(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() >= $(document).height()){
        contents(el, settings); //load content chunk
      }
    });
  };

  //Ajax load function
  function contents(el, settings) {
    var load_img = $("<img/>").attr("src", settings.loading_gif_url).addClass("loading-image"); //create load image
    var record_end_txt = $("<div/>").text(settings.end_record_text).addClass("end-record-info"); //end record text
    if (loading == false && 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();

loadTimeline.php

<?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->prepare("SELECT * FROM user_content WHERE uc_user = :user ORDER BY uc_id DESC LIMIT $position, $item_per_page");
$contents-> bindValue(':user', $person);
$contents-> execute();
?>
<?php while($content = $contents->fetch()){ ?>
  <div class="media timeline-media-margin">
    <div class="row">
      <div class="grid-sizer col-md-12 col-sm-12"></div>
      <div class="grid-item col-md-12 col-sm-12 pr">
        <div class="media-grid">
          <?php if($content['uc_type'] == 'photo'){ ?>
            <img src="images/post-images/6.jpg" alt="" class="img-responsive post-image" />
          <?php } if(trim($content['uc_desc']) != ''){ ?>
            <div class="text-container">
              <div class="content hideContent">
                <p><?php echo $content['uc_desc']; ?></p>
              </div>
              <div class="show-more">
                <span>Show more</span>
              </div>
            </div>
          <?php } ?>
        </div>
      </div>
    </div>
  </div>
<?php } ?>

custom.js: этот код не выполняется после добавления бесконечной прокрутки.

// Show Hide Text
  $('.content').each(function(k,v){
    if($(v).text().length < 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);
  });