javascript - JavaScript更改DOM值在JS函数中不起作用

This question already has answers here:

jQuery Data vs Attr?
                                
                                    （3个答案）
                                
                        
                        
                            Get data-attribute jquery vs javascript
                                
                                    （1个答案）
                                
                        
                                5年前关闭。
            
                    
我有一个链接，该链接根据页面上的活动动态更改一些参数。替换值的功能似乎运行良好，我可以在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/

首先单击“检查数据操作值”，您将看到数据操作参数。然后，单击“设置新值”（您会在开发人员工具中看到它已更改），然后再次单击“检查数据操作值”。我希望它能打印123，但它仍会打印“ data / 1 / pageid / 0 /”。

任何人都可以帮助我理解这一点，并指导我如何解决此问题。

最佳答案

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

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