使用带有 ajax 加载内容的 jquery Bootstrap 模式时加载 jQuery select2 时出错答案

【问题标题】：Error loading jQuery select2 when using jquery Bootstrap modal with ajax loaded content使用带有 ajax 加载内容的 jquery Bootstrap 模式时加载 jQuery select2 时出错
【发布时间】：2015-05-21 15:11:14
【问题描述】：

我正在使用 AJAX 加载 Bootstrap Modal。结果模式完美运行，但加载的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>

【问题讨论】：

标签： jquery twitter-bootstrap jquery-select2 bootstrap-modal

【解决方案1】：

问题

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

解决方案

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

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

选项 1

Here's a plunker 返回以下代码：

<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 访问它的运行版本：

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 返回以下代码：

<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 访问它的运行版本：

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>

【讨论】：