Jquery在使用dataset过程中的缓存问题

jQuery确实相比于js而言，确实精炼了许多，操作元素更加方便，在一定程度上提高了页面的运行效率，但是效率的提高，必然会牵扯出一些问题，今天就用页面元素中的dataset来举例：

比如现在页面中有一个元素：<button id='mybutton' dataset-name='add' dataset-displayname='添加'>添加元素</button>

现在我们通过jquery为当前元素绑定点击事件：

//绑定事件
$("#mybutton").click(function(){

ModifyDisplayName();

//输出当前元素的缓存值：displayname
console.log($(this).data('displayname'));//结果：添加

}) 

//修改元素缓存值displayname
function ModifyDisplayName(){
document.getElementById("mybutton").dataset.displayname='添加111';
}

//此时我们点击button按钮，通过查看输出，可以看到输出内容仍为：添加
//.............
//。。。。。。怀疑电脑，怀疑编译器中...........
//我们还是用js来获取当前元素的缓存值：displayname吧

//重写绑定事件，注意 function里面多个一个参数e哦
$("#mybutton").click(function(e){

ModifyDisplayName();

//输出当前元素的缓存值：displayname
console.log(e.target.dataset.displayname);//结果：添加111

}) 

//What F?用了js就可以：e.target方法是js的方法
//解释原因：jquery使用dataset时，会将第一次的值缓存起来，以后每次都从缓存中取值，js则每次重新取值，问题找到了，记住这个坑

 jquery纵然有很多优势，但是缓存问题没有很好的解决，其实这是一个双刃剑，提高效率的同时，失去了数据的及时性。

本文为作者随心记录，如果不能为您解决问题，请另寻贵资！