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

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

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

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

实现步骤

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

   
     
   
         
         
             Choose 1
             Choose 2
            Choose 3
         
     
   

   .hidden {
       display: none;
   }

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

   

   Digram

   让Figma更好用的AI神器

   下载

   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();
   });

完整代码示例

Add Select2

  

      
      
          Choose 1
          Choose 2
         Choose 3
      
  

注意事项

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

总结

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