动态创建 Select2 多选框：点击事件失效问题解决方案

本文旨在解决使用 JavaScript动态创建 Select2 多选框时，点击事件失效的问题。通过分析问题原因，提供了一种基于模板克隆和动态初始化的解决方案，并附带详细代码示例和注意事项，帮助开发者轻松实现动态添加 Select2 功能。

在使用 JavaScript 动态创建 Select2 多选框时，可能会遇到点击事件失效的问题，即新创建的 Select2 控件无法正常工作。这通常是因为 Select2 插件需要在元素添加到 DOM 后进行初始化。如果直接通过 append 方法添加元素，而没有重新初始化 Select2，则会导致插件无法生效。

以下提供一种解决方案，通过模板克隆和动态初始化 Select2 控件，解决此问题：

实现步骤

1. 隐藏原始 Select2 模板： 首先，在 HTML 中创建一个 Select2 模板，并将其隐藏。这个模板将作为后续动态创建 Select2 控件的基础。可以使用 CSS 的 display: none; 或添加 hidden 类来实现隐藏。

   <div class="for_select">
     <div class="c-input c-input--select c-input--icon">
         <!-- add hidden class so the template is not visible -->
         <select class="select2 main_select2 hidden">
             <option>Choose 1</option>
             <option>Choose 2</option>
            <option>Choose 3</option>
         </select>
     </div>
   </div>

   登录后复制

   .hidden {
       display: none;
   }

   登录后复制

2. 克隆模板并添加唯一ID： 在点击事件处理函数中，克隆隐藏的 Select2 模板。为了方便后续初始化，为新克隆的 Select2 控件添加一个唯一的 ID。

   

   AI建筑知识问答

   用人工智能ChatGPT帮你解答所有建筑问题

   22

   查看详情

   let count = 0;                         // Track how many copies we have
   let $template = $('.c-input--select'); // The HTML you want to copy each time
   let $container = $('.for_select');     // Where the copies should be added
   
   $('#add_select').on('click', function() {
   
       // Increment our counter
       count++;
   
       // Create a copy of your base HTML/select
       let $copy = $template.clone();
   
       // Find the select in the div, and give it an id so we can find it
       $copy.find('select').attr('id', count);
   
       // Append it
       $container.append($copy);
   
   });

   登录后复制

3. 动态初始化 Select2： 在将克隆的 Select2 控件添加到 DOM 后，立即使用 Select2 插件对其进行初始化。根据上一步设置的唯一 ID，找到对应的 Select2 控件并进行初始化。

   let count = 0;                         // Track how many copies we have
   let $template = $('.c-input--select'); // The HTML you want to copy each time
   let $container = $('.for_select');     // Where the copies should be added
   
   $('#add_select').on('click', function() {
   
       // Increment our counter
       count++;
   
       // Create a copy of your base HTML/select
       let $copy = $template.clone();
   
       // Find the select in the div, and give it an id so we can find it
       $copy.find('select').attr('id', count);
   
       // Append it
       $container.append($copy);
   
       // Initialise it as a select2, using the id we just gave it to find it
       $('#' + count).select2();
   });

   登录后复制

完整代码示例

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>

<button type="button" id="add_select">Add Select2</button>
<div class="for_select">
  <div class="c-input c-input--select c-input--icon">
      <!-- add hidden class so the template is not visible -->
      <select class="select2 main_select2 hidden">
          <option>Choose 1</option>
          <option>Choose 2</option>
         <option>Choose 3</option>
      </select>
  </div>
</div>

<script>
    let count = 0;                         // Track how many copies we have
    let $template = $('.c-input--select'); // The HTML you want to copy each time
    let $container = $('.for_select');     // Where the copies should be added

    $('#add_select').on('click', function() {

        // Increment our counter
        count++;

        // Create a copy of your base HTML/select
        let $copy = $template.clone();

        // Find the select in the div, and give it an id so we can find it
        $copy.find('select').attr('id', count);

        // Append it
        $container.append($copy);

        // Initialise it as a select2, using the id we just gave it to find it
        $('#' + count).select2();
    });
</script>

<style>
.hidden {
    display: none;
}
</style>

注意事项

• 确保在初始化 Select2 之前，相关的 HTML 元素已经添加到 DOM 中。
• 每次动态创建 Select2 控件后，都要立即对其进行初始化。
• 使用唯一的 ID 可以避免多个 Select2 控件之间的冲突。
• 根据实际需求，可以调整 Select2 的配置选项。

总结

通过模板克隆和动态初始化，可以有效地解决 JavaScript 动态创建 Select2 多选框时点击事件失效的问题。 这种方法可以确保新创建的 Select2 控件能够正常工作，并提供良好的用户体验. 记住，关键在于每次添加新的Select2元素后，都要对其进行初始化。

以上就是动态创建 Select2 多选框：点击事件失效问题解决方案的详细内容，更多请关注php中文网其它相关文章！