jquery缓存导致的data()方法无法取到data-*改变后的正确值

时间:2024-05-31 12:11:38

今天在应用中遇到一个非常奇怪的问题使用了bootstrapTable和bootstrap Modal模态框,实际上我的应用就是将点击table中的formatter中的操作时将rowid传入modal中的button中的data-id字段,实现如下

jquery缓存导致的data()方法无法取到data-*改变后的正确值

jquery缓存导致的data()方法无法取到data-*改变后的正确值

如下的效果,

jquery缓存导致的data()方法无法取到data-*改变后的正确值

在点击modal中的保存按钮时,使用this传入js中,在js中用jquery的方法$(obj).data('id')方法取值,此处来问题了当我第一次点击出现modal的时候data-id的值被设置为一个值,但是在我再选在另一行点击出现modal的时候,button上的data-id的属性值值变了,但是在jquery取到的值还是第一次的值,也就是说data()取到的并不是当前值。

原因:这里引出了jquery的缓存问题,在给data-id改变值的时候使用的是$(obj).attr(key,string)方法,而这个方法能够改变html中的实际值,就如实际中的一样,data-id会变化,但是取值的时候使用的data(‘id’)方法,这个方法在jquery中第一次取这个值会将值存入jquery缓存中,在下次再取的时候会直接从缓存中读取,而不需要重新检索标签的属性值,这样加快了jquery的执行速度,但是由此导致的问题是data-id实际值通过attr变了但是jquery的缓存值还是上一次的值,所以会出现如题的问题,data方法不能取到正确值,这是data()方法的取值,data(key,string)的赋值也是一样改变的是jquery缓存中的值,不是实际值,所以取值的时候要用attr(key)方法能取到正确值。此问题由jquery的缓存导致,是个坑,不了解容易出现类似的错误。