使用 jquery Bootstrap 模态和 ajax 加载内容时加载 jQuery select2 时出错

Question

我正在加载一个 Bootstrap Modal with AJAX. The result modal works perfectly, but the Select2 框，但加载后未初始化。

我该如何解决？

这是我的代码：

index.php (html):

<a href="content.php" data-target="#ajax" data-toggle="modal" class="btn green">
  Load Select
</a>

<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content"></div>
   </div>
</div>

index.php (js):

$("#select2_content").select2({
   allowClear: true
});

content.php:

<select name="content" id="select2_content" class="form-control select2">
  <option value="A">A</option>
    ...
  <option value="Z">Z</option>
</select>

Answer 1

问题

如果您在初始页面加载时执行 $("#select2_content").select2({})，则 #select2_content 尚不存在。所以 jQuery 表达式没有找到任何东西，因此永远不会初始化 select 框。以后再也不会运行了。

解决方案

您可以执行以下任一操作：

当您通过 ajax 完成加载模式后，您需要利用 loaded.bs.modal event 和运行函数来初始化 select2 在任何新元素上。
或者您可以通过 ajax 调用中的 <script> 标记引入该函数，该调用将在 DOM 解析引入的代码时执行ajax。只需确保在末尾添加脚本标签或将 javascript 包装在文档就绪函数中，否则它仍然不会存在于 dom.

选项 1

Here's a plunker 即returns 代码如下：

<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">AJAX Modal</h4>
  </div>
  <div class="modal-body">
    <select id="select2_content" class="form-control select2">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

对于 ajax 调用，您可以在以下 url 访问它的运行ning 版本：

http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/

Here's a plunker 使用以下代码消耗 AJAX 调用：

<!DOCTYPE html>
<html>

  <head>
    <title>Bootstrap Modal AJAX Demo</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
    <script>
      $(function(){
        $('#ajax').on('loaded.bs.modal', function (e) {
          $("#select2_content").select2({
           allowClear: true
          });
        })
        .modal({
          show: false,
          remote: 'http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/'
        });
      });
    </script>
  </head>

  <body>

    <btn data-target="#ajax" data-toggle="modal" class="btn btn-primary">
      Load Select
    </btn>

    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content"></div>
       </div>
    </div>

  </body>

</html>

选项 2

Here's a plunker 即returns 代码如下：

<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">AJAX Modal</h4>
  </div>
  <div class="modal-body">
    <select id="select2_content" class="form-control select2">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
<script>
  $("#select2_content").select2({
   allowClear: true
  });
</script>

对于 ajax 调用，您可以在以下 url 访问它的运行ning 版本：

http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/

Here's a plunker 使用以下代码消耗 AJAX 调用：

<!DOCTYPE html>
<html>

  <head>
    <title>Bootstrap Modal AJAX Demo</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
  </head>

  <body>

    <a href="http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/"
       data-target="#ajax" data-toggle="modal" class="btn btn-primary">
      Load Select
    </a>

    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content"></div>
       </div>
    </div>

  </body>

</html>

使用 jquery Bootstrap 模态和 ajax 加载内容时加载 jQuery select2 时出错

Error loading jQuery select2 when using jquery Bootstrap modal with ajax loaded content

jquery

twitter-bootstrap

jquery-select2

bootstrap-modal

这是我的代码：

问题

解决方案

选项 1

选项 2