动态创建二叉树 动态创建ocx对象失败怎么设置

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

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

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

实现步骤

隐藏原始 Select2 模板：首先，在 HTML 中创建一个 Select2该模板将作为后续动态创建 Select2 控件的基础。可以使用 CSS 的 display：none；或添加隐藏类来隐藏实现。lt；div class=quot；for_selectquot；gt； lt；div class=quot；c-input c-input--选择 c-input--iconquo​​t；gt； lt；!-- 添加隐藏类，使模板不可见 --gt； lt；select class=quot；select2 main_select2hiddenquot；gt； lt；optiongt；选择 1lt；/optiongt； lt；optiongt；选择 2lt；/optiongt； lt；optiongt；选择 3lt；/optiongt； lt；/selectgt； lt；/divgt；lt；/divgt；登录后复制.hidden { display： none；}登录后复制

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

LTX Studio

Lightricks推出的生成式AI视频制作平台，可以根据用户输入的文本生成超过25秒的微电影视频，95查看详情 let count = 0； // 跟踪我们有多少个副本 $template = $('.c-input--select')； // 每个 timelet 想要复制的 HTML $container = $('.for_select')； // 副本应该在哪里added$('#add_select').on('click'， function() { // 增加计数器计数 ； // 创建基本 HTML/select 的副本 let $copy = $template.clone()； // 在 div 中查找 select，并给它一个 id，以便我们可以找到它 $copy.find('select').attr('id'， count)； // 追加它$container.append($copy)；})；登录后复制

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

let count = 0； // 跟踪我们有多少个副本 let $template = $('.c-input--select')； // 每次要复制的 HTML let $container = $('.for_select')； // 应添加副本的位置$('#add_select').on('click'， function() { // 增加计数器 count ； // 创建基本 HTML/select 的副本 let $copy = $template.clone()； // 在 div 中找到 select，并赋予它一个 id，以便我们可以找到它 $copy.find('select').attr('id'， count)； // 附加它 $container.append($copy)； // 将其初始化为 select2，使用我们刚刚赋予它的 id 来找到它 $('#' count).select2()；})；登录后复制

完整代码示例lt；link href="https：//cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" /gt；lt；script src="https：//code.jquery.com/jquery-3.1.1.min.js"gt；lt；/scriptgt；lt；script src="https：//cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"gt；lt；/scriptgt；lt；button type="button" id="add_select"gt；添加 Select2lt；/buttongt；lt；div class=quot；for_selectquot；gt； lt；div class=quot；c-input c-input--select c-input--iconquo​​t；gt； lt；!-- 添加隐藏类，使模板不可见 --gt； lt；select class=quot；select2 main_select2 hiddenquot；gt； lt；选项gt；选择1lt；/选项gt； lt；选项gt；选择2lt；/选项gt； lt；选项gt；选择3lt；/选项gt； lt；/选择gt； lt；/divgt；lt；/div

gt；lt；scriptgt； let count = 0； // 跟踪我们有多少个副本 let $template = $('.c-input--select')； // 每次要复制的 HTML let $container = $('.for_select')； // 应添加副本的位置 $('#add_select').on('click'， function() { // 增加计数器 count ； // 创建基本 HTML/select 的副本 let $copy = $template.clone()； // 在 div 中找到 select，并赋予它一个 id，以便我们可以找到它 $copy.find('select').attr('id'， count)； // 附加它 $container.append($copy)； // 将其初始化为 select2，使用我们刚刚赋予它的 id 来找到它 $('#' count).select2()； })；lt；/scriptgt；lt；stylegt；.hidden { display： none；}lt；/stylegt；登录后复制

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

总结

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

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