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

标签 javascript jquery

<分区>

我有一个链接会根据页面上的事件动态更改某些参数。替换值的功能似乎工作正常,我可以在 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- 属性,它也不会反射(reflect)在对 .data() 的调用中。如果您想在初始调用后更新数据,则需要使用 .data('action', newvalue) 进行设置。

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

关于JavaScript 更改的 DOM 值在 JS 函数中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22231490/

相关文章:

JavaScript 在控制台中有效,但在我的页面上无效

javascript - 通过 CSS\JQuery 在 html 页面上移动 div

javascript - Flash 对象上的鼠标弹起事件未触发

javascript - 如何从后面的代码中分配 $(document).ready 中的值

javascript - 使用 jQuery 动态创建 hello world 页面不起作用

javascript - 如何添加一组子onclick事件

javascript - 自定义跨浏览器滚动条宽度

javascript - 来自外部 json 文件的 D3js 条形图

javascript - Chrome 扩展回调

jQuery 重置表单值+无效错误