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

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

Choose 1 Choose 2 Choose 3

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(); });.hidden { display: none;}

注意事项

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

总结

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

以上就是动态创建 Select2 多选框:点击事件失效问题解决方案的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1575033.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 16:48:00
下一篇 2025年12月22日 16:48:11

相关推荐

发表回复

登录后才能评论
关注微信