动态创建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 - 假设您的List，其中包含按钮（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 - 在这里我已经把数据ID放到每个按钮来打开列表中这个按钮的模态。

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() { 

       } 
      }); 

     }) 

    });