本文旨在解决使用 JavaScript动态创建 Select2 多选框时，点击事件失效的问题。通过分析问题原因，提供了一种基于模板克隆和动态初始化的解决方案，并附带详细代码示例和注意事项，帮助开发者轻松实现动态添加 Select2 功能。
在使用 JavaScript 动态创建 Select2 多选框时，可能会遇到点击事件失效的问题，即新创建的 Select2 控件无法正常工作。这通常是因为 Select2 插件需要在元素添加到 DOM 后进行初始化。如果直接通过 append 方法添加元素，而没有重新初始化 Select2，则会导致插件无法生效。
以下提供一种解决方案，通过模板克隆和动态初始化 Select2 控件，解决此问题：
实现步骤
-
隐藏原始 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; } -
克隆模板并添加唯一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(); });
完整代码示例
<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元素后，都要对其进行初始化。
