HTML5和JQuery-无法从Data- *属性检索数据
[英]HTML5 & JQuery - Not able to retrieve data from Data-* attribute
问题描述
我正在学习HTML5和JQuery中Data- *属性的使用，这是关于如何简单地从div检索数据的。
这是我的标记：
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function () {
$('#restoreButton').click(function () {
var sources$ = $('div').data('module');
});
});
</script>
<div data-module="Sources" data-module-id="sourcePane">
<button type="button" class="green90x24" id="restoreButton">Restore</button>
</div>
</body>
</html>
它说变量sources $是Undefined 。
我正在使用JQuery的简单data（）函数，但是不起作用。 我已经看到这是基本功能之一。
任何建议都会有帮助
7 个解决方案
解决方案1
1 2014-05-24 13:06:44
请检查您的jQuery版本。
或检查开发人员工具中的日志（Windows中为Ctrl + Shift + I，在Mac中为Command + Option + I）。
您可以使用
console.log(sources$);
解决方案2
0 2014-05-24 13:03:47
可能需要更新您的jquery版本，但也可以尝试：
$('div').data('module-id');
数据方法将获取属性，并期望在data-后输入密钥
解决方案3
0 2014-05-24 13:10:28
在何处使用此变量sources $？
您应该在click事件处理程序中使用此变量。
或者，您应该将变量定义为全局变量。
解决方案4
0 2014-05-24 14:16:00
利用jQuery 1.11.0 ，原始文章中的现有文章似乎可以正常工作
HTML
<div data-module="Sources" data-module-id="sourcePane">
<button type="button" class="green90x24" id="restoreButton">Restore</button>
</div>
JS
$(function () {
$('#restoreButton').click(function () {
var sources$ = $('div').data('module');
$("body").append(sources$)
});
});
解决方案5
0 2014-05-24 14:23:41
您的代码有效，但是您可能无法正确加载jQuery。 检查您的jQuery脚本的源URL，并确保已加载。 如果变量sources$在末尾添加$符号也是有原因的吗？ 这很罕见。
解决方案6
0 2014-05-24 14:28:47
它说变量sources $是Undefined。
无论怎么说，它绝对意味着您正在尝试从其范围之外访问source $。 您不能在定义为点击回调的匿名函数之外访问它。
解决方案7
0 2014-05-24 15:19:13
jQuery 1.4.1中的.data方法不能与HTML数据属性一起使用。 您需要jQuery 1.4.3 （最低）。
您正在使用的示例页面http://bibeault.org/jqia2/chapter3/lab.move.and.copy.html没有使用.data方法来检索data-module的值。
如果检查源代码，则还有另一个外部脚本jqia2.support.js ，它使用.attr方法（这是在jQuery 1.4.1中使用HTML数据属性的解决方法）来检索data-module的值。 参见第50和55行：
$(this).attr('data-module')
这是一个小提琴： http : //jsfiddle.net/3dP6A/
如何访问放置在不同标签中的自定义 data-* html5 属性，通常在 jquery 中？
[英]how to access custom data-* html5 attribute placed in different tag, commonly in jquery?
数据表：从现有 JSON 对象设置行 HTML5 data-* 属性
[英]Datatables: Setting row HTML5 data-* attribute from existing JSON object
使用 jquery 从 HTML5 数据元素获取并执行 function + 参数
[英]get and performing function + parameters from HTML5 data- element with jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.