jQuery 的一个小坑
5 min read趁印象还比较深, 记一下今天遇到的一个不大不小的坑.
起因是这样…
最近在做的工作有关表格的CRUD, 找了个开源的第三方包来做, 功能还是蛮多的, 而且是国人开发的, 顺手推荐一下, bootstrap-table.
照着开发者提供的一个 CRUD example 改造成自己需要的样子. 附上 CodePen.
题外话, 最近经常使用 CodePen 和 jsFiddle, 本来觉得 jsFiddle 长得比较小清新, 更好看些, 可是实际用下来竟然觉得 CodePen 更好用. 主要两个地方不爽jsFiddle, 一是经常很卡打开很慢, 二是添加 external resources 的时候竟然要求一定要 CDN 的. 另外 CodePen 有个可以自由选取预处理器的功能比jsFiddle也方便一些. 抽时间做个自己的 CodePen theme
See the Pen zBjLwQ by bamboo (@bambooom) on CodePen.
stuck in radio…?!
因为不想跳转页面, 就希望更新表格数据什么的也可以在同一页完成, 所以就选择了弹窗.
正常考虑打开弹窗编辑, 会自动填充好表格中已有的值. 这个通过 showModal 实现了.
一开始觉得挺好, 后来发现一个神奇的问题, 那就是如果多次打开 modal, radio checked 却表现诡异.
查看元素后, 明明显示是正确的元素 checked="checked", 但是页面就是不显示哪个选项被选择了. 我一般用 chrome, 换成 safari 也是一样的问题.
菜鸟懵逼好几分钟…搜索一圈, 尝试了几种网上说的方法无果, 抓头发抓疯了后请求同事帮忙, 同事设断点什么的 debug, 然后表示也很奇怪, 但说反正肯定是我代码有问题. 那为什么重新刷新页面, 第一次点开 modal 的话就显示的是正确的呢?
正值午饭时间, 带着一肚子 黑人问号.jpg 吃完了饭+发了个呆+睡了个午觉, 下午看到上午打开的一个 SO 页面, How to check a radio button with jQuery ? - Stack Overflow, 又瞟了一眼, 发现自己又犯了视而不见的醉点, 没有认真读答案, 票数最高的答案写的很清楚,
$("#radio_1").prop("checked", true)For versions of jQuery prior to 1.6, use:$("#radio_1").attr('checked', 'checked');
也就是说我在给 radio element 填充数值的时候不应该用 .attr(), 而应该用 .prop(), 非常明显我使用的 jQuery 版本早就超过1.6了.
就说 radio 这种常用元素怎么可能留这么奇怪的问题到现在…😂
修正之后多次打开弹窗就正常了.
See the Pen AXagzB by bamboo (@bambooom) on CodePen.
辣么prop 和 attr 有啥区别
搜了才发现, 这是 jQuery 在版本更新到1.6.1 开始的变化, 官方 blog 5年前发布的时候就说很清楚了…(啊啊啊啊啊啊, 又没好好读官方文档…抽)
曾经只有 attr() 这一个 method 去控制元素的 attribute, 1.6.1 开始新增加了一个 prop(), 由于旧有的attr()很难维护才重新增加的.
最重要的区别就是, 对于类似checked, selected, readonly, disabled 这种 boolean attribute, jQuery 都需要使用 prop() 去控制, 而旧的attr()设置只会影响 initial value, 所以我的弹窗第一次点开的时候显示是正确的.
经实验, 就算在页面更改 radio 或者 checkbox 选择的选项, 在 html 里是不会看到所谓 checked="checked" 这个 attribute 有任何变化.
另外两个值得一读的资料: