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

有两个问题阻止加载选择。

1. select2 的初始化是在 click 事件之外的，因此它发生在 select 元素存在之前页面加载时。这必须在选择添加到 DOM 之后发生。

   $('.js-example-basic-multiple').select2();
   

2. click 事件在类“志愿者”上注册，并且对单元格的任何点击都会执行此功能，即使在加载选择之后也是如此。当您尝试选择一个选项时，这会导致选择重新加载，从而导致该选项丢失。要解决此问题，您可以检查选择是否已加载。

   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>