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

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

jquery缓存导致的data()方法无法取到data-*改变后的正确值_第1张图片

如下的效果,

在点击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会变化,但是取值的时候使用的data(‘id’)方法,这个方法在jquery中第一次取这个值会将值存入jquery缓存中,在下次再取的时候会直接从缓存中读取,而不需要重新检索标签的属性值,这样加快了jquery的执行速度,但是由此导致的问题是data-id实际值通过attr方法变了,但是jquery的data() 方法取的值还是从缓存来的第一次的值,所以会出现上面的的问题,data()方法不能取到正确值。

由此延伸 data(key,string)的赋值也是一样改变的是jquery缓存中的值,不是实际值,所以取值的时候要用attr(key)方法才能取到当前的正确值。

此问题由jquery的缓存导致,是个坑,不了解容易出现类似的错误。

你可能感兴趣的:(web前端)