JavaScript更改的DOM值在JS函数中不起作用[重复]

Question

我有一个链接，它根据页面上的活动动态更改某些参数。替换值的功能似乎工作正常，我可以在 chrome 开发人员工具的“元素”窗口中看到它正在更新。但是，当我尝试从另一个 JS 函数中读取该值时，它根本没有改变。

我为这个问题做了一个非常简化的例子：

<a href="#" id="a-delete-page" data-action="data/1/pageid/0/">
check data-action value</a>    
<a href="#" id="toggle">set new value</a>

<script>
$('#a-delete-page').click(test);
$('#toggle').click(toggleValue);

function toggleValue(){
    var newValue = '123';    
    $("#a-delete-page").attr('data-action',newValue);

    alert("new value set:"+newValue);  
}

function test(){
  alert($(this).data('action'));   
}
</script>

在这里试试：http://jsfiddle.net/2hj3e/

首先点击“check data-action value”，你会看到data-action参数。然后单击设置新值（您会在开发人员工具中看到它发生了变化）并再次单击“检查数据操作值”。我希望它打印 123，但它仍然打印“data/1/pageid/0/”。

谁能帮助我理解这一点，并指导我如何解决这个问题。

Answer 1

jQuery 仅在您第一次调用 .data() 时从 data- 属性中提取值。之后，它基本上会缓存它们，因此即使您更新或添加另一个data- 属性，它也不会反映在对.data() 的调用中。如果您想在初始调用后更新数据，则需要使用.data('action', newvalue) 进行设置。

来源：http://api.jquery.com/data/#data-html5

Answer 2

jQuery 与.data 有一些不同之处。如果您使用.data 来检索值，也可以使用它来设置它。

$("#a-delete-page").data('action',newValue);