динамически созданный bootstrap3 модалов не работает

Question

У меня есть страница с динамически сгенерированным списком элементов. Каждый элемент имеет кнопку переключения модального окна с дополнительной информацией, но модальные не отображаются. модальностей размещены сразу после открытия тела тега:

<div class="modal fade" id="auto9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Something</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> 
     </div> 
    </div> 
    </div> 
</div> 


<div class="modal fade" id="auto16" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Something</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> 
     </div> 
    </div> 
    </div> 
</div> 

Кнопки:

<button class="btn btn-default" data-toggle="modal" data-target="#auto9" type="button">Подробнее</button></p> 
<button class="btn btn-default" data-toggle="modal" data-target="#auto16" type="button">Подробнее</button></p> 

Если я поместить только кнопку и модальный в HTML тела все работает отлично. Что не так?

Answer 1

Здесь шаг за шагом Реализация в одном из моих проектов, надеюсь, что это поможет.

1-Предположим, что у вас есть свой список, в котором есть кнопка (пример MVC Razor).

@foreach (var list in ListCollection) 
{        
    <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@list.ID> Details </button> 
} 

2-Здесь я поместил идентификатор данных на каждую кнопку, чтобы открыть модальную кнопку для этой кнопки в списке.

3-Каждая кнопка откроет модальную систему с дополнительной информацией, используя скрипт (сценарий ниже).

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="exampleModalLabel">Title Here</h4> 
      </div> 
      <div class="modal-body"> 
       //Put here more details of the item, by Ajax call or any thing you like 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

4-Теперь скрипт часть

$(document).ready(function() { 
     $('#exampleModal').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget);//Button which is clicked 
      var clickedButtonId= button.data('Id');//Get id of the button 

      var modal = $(this); 
      modal.find('.modal-body').text(clickedButtonId); 
//Id of the clicked button which i have put inside the modal-body div class or put info here using ajax call for the button that button. 

//Ajax call to get the more details of clicked button in the list. 

      $.ajax({ 
       url: "URL", 
       type: "POST", 
       data: JSON.stringify({ id: clickedButtonId}), 
       dataType: 'JSON', 
       contentType: "application/json", 
       success: function (response) { 
        modal.find('.modal-body').text(response);//Put here more info using ajax 
       } 
        , 
       error: function() { 

       } 
      }); 

     }) 

    });