Bootstrap Modal не запускается после его динамического создания с помощью jQuery

Question

Я вытаскиваю предметы из SP2013 и строю модал динамически через ajax из списка.Идентификатор для запуска модального режима динамически извлекается из столбца идентификатора, и все элементы встроены в DOM, но модальный режим не запускается.Консоль не дает мне никаких ошибок, поэтому я не уверен, что происходит.Я также создаю кнопку, которая должна вызывать модальный режим, и ее идентификатор извлекается из того же столбца, что и столбец модального идентификатора.

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 class="dark-grey-text ">' + items[i].Description+'<a data-toggle="modal" data-target=#basicExample'+items[i].ID+'><span class="modalButton" >Read More</span></a></div></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’d 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></div></div></div>';
modalContent.prepend(modalContentCard);
console.log(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);

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

});

};

handle_ajax(url1);

<a data-toggle="modal" data-target="#basicExample17"><span class="modalButton">Read More</span></a>

<div class="modal fade" id="#basicExample17" 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>Test</strong></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span></button>
      </div>
      <div class="modal-body">
        <h5>Personal:</h5>
        <p><strong>A dream I have is to:</strong></p>
          <p>Lorem Ipsum Test<br /></p>
        <p></p>
        <p><strong>You�d be surprised to learn that I:</strong></p>
          <p>Lorem Ipsum Test<br /></p>
        <p></p>
        <p><strong>My motto is:</strong></p>
          <p>Lorem Ipsum Test<br /></p>
        <p></p>
        <p><strong>The mission of our agency is:</strong></p>
          <p>Lorem Ipsum Test<br /></p>
        <p></p>
        <hr />
        <h5>Our current priorities are:</h5>
        <p></p>
          <p>Lorem Ipsum Test<br /></p>
        <p></p>
        <h5>Our biggest accomplishments in the past year include:</h5>
        <p></p>
          <p>Lorem Ipsum Test<br /></p>
        <p></p>
        <div class="agency">
          <h5>One thing you did not know about our agency is:</h5>
          <p></p>
          <p>Lorem Ipsum Test<br /></p>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вы добавили свой модальный идентификатор как:

<div class="modal fade" id="#basicExample17" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Он должен выглядеть следующим образом:

<div class="modal fade" id="basicExample17" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

При использовании <a data-toggle="modal" data-target="#basicExample17"> if находит элемент html с идентификатором, предоставленным вdata-target и тогда он покажет этот элемент на экране.