使用 jQuery 的 onClick() 附加 Select2

Question

我正在尝试使用 jQuery 的 onClick() 附加 Select2。我的 HTML 代码是 <td class="volunteer" id="47">Bob SMith and admin</td>。我的 jQuery 代码如下。

(function($) {
    $(document).ready(function () {
        $(".volunteer").on("click", function () {            
        $(this).html(`<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
            </select>`);
        });
        $('.js-example-basic-multiple').select2();
    });
})(jQuery)

但这不起作用。

Answer 1

有两个问题阻止 select 加载。

select2 的初始化在点击事件之外，因此在 select 元素存在之前页面加载时发生。这必须在 select 添加到 DOM 之后发生。
```
$('.js-example-basic-multiple').select2();
```
单击事件在 class 'volunteer' 上注册，即使在 select 加载后，对单元格的任何单击都会执行此函数。当您尝试 select 一个选项时，这会导致 select 重新加载，从而导致选项丢失。要解决此问题，您可以检查 select 是否已加载。
```
if(!$(this).has("select").length) {
```

(function($) {
  $(document).ready(function() {
    var state = "";
    $(".volunteer").on("click", function(event) {
        // Check if select is already loaded
      if(!$(this).has("select").length) {
        // Populate select element
        $(this).html(`<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
            <option value="AL">Alabama</option>
            <option value="WY">Wyoming</option>
            </select>`);      
              
        // Initialise select2
        $(this).children("select").select2();
      }
    });
  });
})(jQuery)

.js-example-basic-multiple {
  width: 200px;  
}

thead{
    font-weight: bold;
}

table, th, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<table>
  <thead>
    <tr>
      <td>Table Header 1</td>
      <td>Table Header 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="volunteer" id="47">Click Me</td>
      <td class=""></td>
    </tr>
    <tr>
      <td class="volunteer" id="48">Click Me</td>
      <td class=""></td>
    </tr>
  </tbody>
</table>

使用 jQuery 的 onClick() 附加 Select2

Attach Select2 with onClick() of jQuery

jquery

onclick

jquery-select2