jquery .data 函数与在 html 中设置数据值答案

【问题标题】：jquery .data function vs setting data value in htmljquery .data 函数与在 html 中设置数据值
【发布时间】：2013-06-27 13:59:44
【问题描述】：

如果我在 jquery 中使用$("#my_button").data('my-value', { onClick: function () { my_obj_function(); } });

在另一个函数中我这样做

my-value.onClick.call() 有效。

但如果我尝试在 html 中设置数据属性，它就不起作用。我在 html 中做了这个 <a href='#' data-my-value='{"onClick":"function () { my_obj_function(); }"}'>Click me</a>

虽然calling my-value.onClick.call() 我得到 uncaught typeerror : object function() has no method call

我做错了什么？

【问题讨论】：

根据 HTML5 自定义属性规范，<a ... data-my-value="..." ...> 等同于 $(...).data('myValue')。
@Phylogenesis - 并非如此。 .data() 方法可以检索 html5 data- 属性，但不能设置它们。 data- 属性是字符串，但.data() 可以存储包括对象在内的其他类型。
@nnnnnn - 是的。我知道 jQuery 使用 $.cache 来处理 data()，但我认为值得一提的是数据键和 Rifky 使用的属性之间的轻微脱节。
@Phylogenesis - 啊。对，对不起。（我自己的断开连接。）

标签： javascript jquery function jquery-data

【解决方案1】：

当你用.data() 设置一个值时，它不在元素上设置一个html 属性，jQuery 将它存储在它自己的数据结构中。这就是您可以使用.data() 来存储函数和其他对象的原因。 .data() 可以用于检索 html5 data- 属性，但不能设置它们。

当你有一个 html 属性时，它只是一个字符串，所以你需要 eval() 它或以某种方式解析它并传递给 new Function()。这不是要走的路。

话虽如此，我看不出my-value.onClick.call() 是如何工作的，因为它实际上是在说my 减去value.onClick.call()。假设你已经用.data() 设置了值，你可以说$("#my_button").data('my-value').onClick.call()...

如果你想用 jQuery 设置一个data- 属性，你可以使用.attr() 方法而不是.data() 和$("#my_button").attr('data-my-value', ...)，但正如已经提到的，这会将它设置为一个字符串。

【讨论】：

这意味着我无法在 HTML 的数据属性中设置对象：-(

【解决方案2】：

你的代码

<a href='#' data-my-value='{"onClick":"function () { my_obj_function(); }"}'>Click me</a>

将其设置为字符串而不是对象。

【讨论】：

有没有其他替代方法可以在html中将函数或对象设置为数据值？
你可以做一个eval，但这很危险