如果没有耐心,可以直接跳过前面问题描述,从原因开始看,问题描述涉及业务场景,浪费时间。
今天在应用中遇到一个非常奇怪的问题,实际上我的应用就是将点击table中的formatter中的操作时将rowid传入模态框modal中的保存按键button的data-id属性字段,实现如下
如下的效果,
在点击modal中的保存按钮时,onclick事件saveAuthMenu(this)将this传入function中 (如上图所示),
在function中用jquery的方法$(obj).data('id')方法取值,
此处来问题了当我第一次点击出现模态框modal的时候modal中button的data-id的值被设置为一个值,例如AAAA,但是在我再选另一行点击出现modal的时候,button上的data-id的属性值变了,但是在使用jquery的$(obj).data('id')方法取到的值还是第一次的值,也就是说
data()取到的并不是当前值,而每一次都取是第一次得值。
原因:
这里引出了jquery的缓存问题,
在给data-id改变值的时候使用的是$(obj).attr(key,string)方法,而这个方法能够改变html中的实际值,
就如实际中的一样,data-id会变化,但是
取值的时候使用的jquery的data(‘id’)方法,查看jquery源码,不难发现,这个方法在jquery中第一次取这个值会将值存入jquery缓存中,在下次再取的时候会直接从缓存中读取,而不需要重新检索标签的属性值,这样加快了jquery的执行速度,
但是由此导致的问题是data-id实际值通过attr方法变了,但是jquery的data() 方法取的值还是从缓存来的第一次的值,所以会出现上面的的问题,data()方法不能取到正确值。
由此延伸 data(key,string)的赋值也是一样改变的是jquery缓存中的值,不是实际值,
解决:
1、如果是可变值,取值的时候要用attr(key)方法才能取到当前的正确值。
2、如果是非可变值,取值时可用jquery的data()方法,可提高执行效率。当然也可以用attr,看个人的习惯
此问题由jquery的缓存导致,是个坑,不了解容易出现类似的错误。