解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

本文使用博客园Markdown编辑器进行编辑

1.问题呈现

项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面。逻辑是修改一个广告的图片和标题。 效果截图如下:

使用Select2,主要是因为它支持下拉式搜索。所以在数据稍微多一点,作为搜索选择功能的首选。但是运行出来之后,发现搜索框无法点击。开始想到的index不够大,被其他的元素覆盖了。但是跳转z-index也无法解决。在普通的页面,搜索框是ok的。

2.解决办法

通过Google搜索,发现select2作者在github上说明了这个问题:

但是他给出解决的方法,我看不太懂,后面也有人说直接修改jQuery UI类库,但是我们项目中使用的jquery-ui-1.10.3.min.js。所以不可能修改jQuery UI的源代码,而已修改源代码,在后期类库升级和维护上,各种坑还是比较多。所以我继续搜索解决版本。在jQuery UI的官网找到了方法。hot fix代码如下:

    hot fix:Select2控件在jQuery UI弹出对话中不能搜索
$.widget("ui.dialog", $.ui.dialog, {
    open: function () {
        return this._super();
    },
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});

3.心得体会

在前端开发中,虽然很多时候为了快速迭代和项目及时上线,我们会使用很多成熟的第三控件或者插件,我们在借助官网api之后,在项目正确的集成它之后,还需要更深入了解它的工作原理和细节。这样在遇到不可知的bug时,能快速找到问题的根源是关键。这也是工作之后,leader或者manager更加强调你发现问题和解决问题的能力。

参考网址:

1.select2在jQuery UI Dialog上的bug 2.jQuery UI allowInteraction方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-01介绍

码云项目页:https://gitee.com/scooplolwiki/toh-6

10120
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (2)---清单类报表

在大多报表系统中都有清单类报表的身影,比如:客户清单、商品信息清单、设备清单、物品采购清单、记账凭证、货品发货清单、员工清单等等。清单类报表看视乎比较简单,但是...

23960
来自专栏IT大咖说

Redux助力美团点评前端进阶之路

摘要 都说Redux好,但Redux到底好在哪,它真的解决了业务中遇到的问题吗? 因为在业务中引入Redux而带来的额外成本是否让你苦恼过? 会不会是我们打开R...

34840
来自专栏听雨堂

Android新手之旅(7) RadioButton的自定义

希望用到RadioGroup的功能,但遇到一些看似简单问题却无法解决:系统的图标太大却难以更换,在网上找解决方案。有些地方提到,由于用的是图片,所以无法缩小,...

27980
来自专栏刘宁的专栏

Android开发入门的正确姿势

对于从事移动客户端开发者的初学者而言,不论是Android还是iOS开发,对客户端开发有一个整体的认识,然后再逐步深入,这样会有事半功倍的效果。

1.4K00
来自专栏达摩兵的技术空间

14年工作回顾(一)

本文开始会把之前项目中遇到的一些问题进行分类整理,并得出其经验值。也许其本身在今天的技术架构中没有任何实用价值,但在项目开发中能有举一反三的作用。

10220
来自专栏ytkah

怎样把微信聊天记录导出备份到电脑【微信公众平台技巧】

  微信公众平台上的微信聊天记录可以保留5天,但公众平台回复用户消息时限将从24小时延长为48小时,所以我们有必要进行及时回复、微信聊天记录导出备份。及时回复微...

84270
来自专栏java一日一条

前端优化带来的思考,浅谈前端工程化

这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段...

16930
来自专栏ytkah

如何用腾讯电脑管家备份微信聊天记录

  微信发布了5.2.1版本更新,其中一个很人性化的功能是支持腾讯电脑管家备份微信聊天记录到电脑上,可将语音、文字、图片、视频等聊天记录快速加密备份到本地电脑中...

66750
来自专栏微信小程序开发

微信小程序常见问题(三)

知晓程序员,专注微信小程序开发的程序员! 一、获取formId 相信使用过小程序的同学,多少都收到过小程序的通过消息,如下: 这类通知消息,是和好友消息一样展示...

56060

扫码关注云+社区

领取腾讯云代金券