本文旨在解决使用 JavaScript动态创建 Select2 多选框时，点击事件失效的问题。通过分析问题原因，提供了一种基于模板克隆和动态初始化的解决方案，并附带详细代码示例和注意事项，帮助开发者轻松实现动态添加 Select2 功能。
在使用 JavaScript 动态创建 Select2 多选框时，可能会遇到点击事件失效的问题，即新创建的 Select2 控件无法正常工作。这通常是因为 Select2 插件需要在元素添加到 DOM 后进行初始化。如果直接通过 append 方法添加元素，而没有重新初始化 Select2，则会导致插件无法生效。
以下提供一种解决方案，通过模板克隆和动态初始化 Select2 控件，解决此问题：
实现步骤
-
隐藏原始 Select2 模板： 首先，在 HTML 中创建一个 Select2 模板，并将其隐藏。这个模板将作为后续动态创建 Select2 控件的基础。可以使用 CSS 的 display: none; 或添加 hidden 类来实现隐藏。
.hidden { display: none; } -
克隆模板并添加唯一ID： 在点击事件处理函数中，克隆隐藏的 Select2 模板。为了方便后续初始化，为新克隆的 Select2 控件添加一个唯一的 ID。
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); }); -
动态初始化 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(); });
完整代码示例
注意事项
- 确保在初始化 Select2 之前，相关的 HTML 元素已经添加到 DOM 中。
- 每次动态创建 Select2 控件后，都要立即对其进行初始化。
- 使用唯一的 ID 可以避免多个 Select2 控件之间的冲突。
- 根据实际需求，可以调整 Select2 的配置选项。
总结
通过模板克隆和动态初始化，可以有效地解决 JavaScript 动态创建 Select2 多选框时点击事件失效的问题。 这种方法可以确保新创建的 Select2 控件能够正常工作，并提供良好的用户体验. 记住，关键在于每次添加新的Select2元素后，都要对其进行初始化。
