Jquery 动态创建的bootstrap3模式不起作用

我有一个动态生成的项目列表页面。 每个项目都有按钮切换具有更多信息的模态窗口，但模态不显示。 模态放置在主体打开标记的正后方：

<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主体中，一切都很好。有什么问题吗？

这里是我的一个项目中的逐步实施，希望能有所帮助

1-假设是您的列表，其中包含按钮（MVC Razor视图示例）

---

下面是我的一个项目中的一步一步的实施，希望对大家有所帮助

1-假设是您的列表，其中包含按钮（MVC Razor视图示例）

---

下面是一个示例链接：如果您在html中动态添加这些模态，那么您必须将作用域应用于这些模态。检查控制台错误SyntaxError:预期表达式，得到'create fiddle/snippetAlex'，检查您的

jquery-2.1.1.js

和

bootstrap.js

文件。它们似乎包含HTML内容。如果没有加载bootstrap.js，modals将不起作用这里有一个示例链接：如果您在html中动态添加这些modals，那么您必须将作用域应用于这些modals。检查控制台错误SyntaxError:预期表达式，得到'create fiddle/snippetAlex'，检查您的

jquery-2.1.1.js

和

bootstrap.js

文件。它们似乎包含HTML内容。如果bootstrap.js未加载，modals将无法工作

@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>
 }

<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>

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

                }
            });

        })

    });