Код jQuery не работает при миграции с SP2013 на SP2019

Question

У меня есть код, который отлично работает на SP2013 как макет страницы. Код выполняет загрузку элементов из списка, он показывает первые 4 элемента, а затем, когда вы нажимаете кнопку «загрузить еще», загружает еще 4 элемента, пока не достигнет общего количества элементов;когда вы нажимаете кнопку сброса, он возвращается к 4 пунктам. Когда я перенес код в SP2019 и преобразовал его в веб-часть, элементы не отображаются, они находятся в DOM, но не отображаются. У меня есть класс .content для отображения: нет;когда я удаляю его, все элементы отображаются, но это не ожидаемый результат;Я ожидаю, что только 4 первых элемента будут отображаться по умолчанию, и когда будет нажата кнопка «Загрузить больше», отобразятся еще 4 элемента. Что странно, так это то, что он работает правильно на SP2013, но не на 2019, и консоль не показывает никаких ошибок.

<div class="content col-md-6"></div>

.content {
  display: none;
}

$(document).ready(function() {
        $(".content").slice(0, 4).show();
        $(".resetBtn").hide();
        var items = $(".content").length;
        var shown;

        $(".loadMore").click(function() {
          $(".resetBtn").show();
          shown = $(".content:visible").length + 4;
          if (shown < items) {
            $(".content:lt(" + shown + ")").show(300);
          } else {
            $(".content:lt(" + items + ")").show(300);
            $(".loadMore").hide();
          }
        });
        $(".resetBtn").click(function() {
          var end = $(".content").length;
          console.log(end);
          $(".content").slice(4, end).hide(300);
          $(".loadMore").show();
          $(".resetBtn").hide();
        });
      });

Answer 1

Мне просто нужно было переместить скрипт в вызов ajax

var buildManagersCards = function(items) {
var managersContent = $("#managersContent");

for (let i = 0; i < items.length; i++) {
//build cards
var managersCards =
'<div class="content col-md-6"><div class="single-news mb-4"><div class="row"><div class="col-md-3"><div class="view overlay rounded z-depth-1 mb-4"><img class="img-fluid" src="' + items[i].Image.Url +'" alt="' + items[i].Title + '" /><a><div class="mask rgba-white-slight waves-effect waves-light"></div></a></div></div><div class="col-md-9"><p class="font-weight-bold dark-grey-text">' + items[i].Title +
'</p><div class="d-flex justify-content-between"><div class="col-11 pl-0 mb-3 managerDescription"><div>' + items[i].Description+'</div><div class="managerDate"><small>' + items[i].date+'</small></div><a data-toggle="modal" data-target=#basicExample'+items[i].ID+'><span class="modalButton" >Read More</span></a></div><a data-toggle="modal" data-target=#basicExample'+items[i].ID+'><i class="fas fa-angle-double-right modalArrow"></i></a></div></div></div></div></div>'; 
managersContent.prepend(managersCards);
}

};

var buildModal = function(items) {
var modalContent = $('#modalContent');

for (let i = 0; i < items.length; i++) {

var modalContentCard = '<div class="modal fade" id=basicExample'+ items[i].ID+'  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg"  role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel"><strong>' + (items[i].Title || ' ') +
'</strong></h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><h5>Personal:</h5><p><strong>A dream I have is to:</strong> '+ (items[i].Dream || ' ') +'</p><p><strong>You would be surprised to learn that I:</strong>'+ (items[i].Learn || ' ') +'</p><p><strong>My motto is:</strong>'+( items[i].Motto || ' ') +
'</p><p><strong>The mission of our agency is:</strong>'+ (items[i].Mission || ' ') +'</p><hr><h5>Our current priorities are:</h5><p>'+ (items[i].Priorities || ' ') +'</p><h5>Our biggest accomplishments in the past year include:</h5><p>'+ (items[i].Accomplishments || ' ') +'</p><div class="agency"><h5>One thing you did not know about our agency is:</h5><p>'+ (items[i].Agency || ' ')+'</p></div><div class="mt-3 mb-3"><a href="'+ (items[i].Link.Url || ' ') +'" target="_blank">'+ (items[i].Website || ' ') +'</a></div><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></div></div></div></div></div>';
modalContent.prepend(modalContentCard);
}

};

//ajax call
var url1 =
"/ManagersMoments/_api/web/lists/GetByTitle('managersMoments')/items";
var handle_ajax = function(url) {
$.ajax({
url: url,
method: "GET",
headers: {
Accept: "application/json; odata=verbose"
},
success: function(data) {
var items = data.d.results;
console.log(items);

buildManagersCards(items);
buildModal(items);
$(".content").slice(0, 4).show();
        $(".resetBtn").hide();
        var items = $(".content").length;
        var shown;

        $(".loadMore").click(function() {
          $(".resetBtn").show();
          shown = $(".content:visible").length + 4;
          if (shown < items) {
            $(".content:lt(" + shown + ")").show(300);
          } else {
            $(".content:lt(" + items + ")").show(300);
            $(".loadMore").hide();
          }
        });
        $(".resetBtn").click(function() {
          var end = $(".content").length;
          console.log(end);
          $(".content").slice(4, end).hide(300);
          $(".loadMore").show();
          $(".resetBtn").hide();
        });

},
error: function(data) {
console.log("Error: " + data);
}

});

};

handle_ajax(url1);