使用 jquery 访问数据属性返回未定义？答案

【问题标题】：Accessing data attribute using jquery returns undefined?使用 jquery 访问数据属性返回未定义？
【发布时间】：2016-04-06 12:29:38
【问题描述】：

在我的视图中，我有一个如下按钮：

<button data-assigned-id="@IdUser" onclick="updateClick()" type="button" class="btn btn-sm btn-default"></button>

我的 div

<div id="partial_load_div">

</div>

脚本

function updateClick() {
    var id = $(this).data('assigned-id');
    $('#partial_load_div').show();
    $('#partial_load_div').load('/Users/UpdatePartial?id=' + id);
}

id 总是显示为未定义，我检查了，@IdUser 总是有值

然后在 chrome dev 中我得到了错误

GET http://localhost:19058/Users/UpdatePartial?id=undefined 400（错误请求）

知道如何解决这个问题吗？

【问题讨论】：

删除 onclick="updateClick()" 并添加类名或 id 以使用选择器，然后 $('#mybutton').click( function) { var id = $(this).data('assigned-id'); ....
@StephenMuecke 感谢您的评论，效果很好！您可以将您的评论添加到答案中以便我标记它吗？

标签： jquery custom-data-attribute

【解决方案1】：

使用data() 读取数据属性时，您需要删除- 和值的驼峰式。所以你想要：

var id = $(this).data('assignedId');

docs on data() 显示这个：

从 jQuery 1.4.3 开始，HTML 5 数据属性将自动拉入 jQuery 的数据对象。属性的处理 jQuery 1.6 中更改了嵌入式破折号以符合 W3C HTML5 规范。

例如，给定以下 HTML：
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
以下所有 jQuery 代码都可以使用。
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
上面代码的第二个语句正确地引用了元素的 data-last-value 属性。如果没有存储数据使用传递的键，jQuery 在元素，将骆驼大小写的字符串转换为虚线字符串，然后将 data- 添加到结果中。所以，字符串 lastValue 被转换到 data-last-value。

我没有注意到你是如何绑定点击事件的。如果要使用$(this)，则必须使用 jquery 绑定事件。所以你需要：

<button data-assigned-id="works" id="button">
clickme</button>

$(window).ready(function() {
     //bind the event using jquery not the onclick attribute of the button
     $('#button').on('click', updateClick);

});


function updateClick() {
    alert($(this).data('assignedId'));
}

Working fiddle

【讨论】：

感谢您花时间回答我的问题！我仍然遇到同样的错误。我不知道为什么不起作用
我没有注意到您在@Maro 遇到的另一个问题。查看更新
他们只是去掉破折号并以全小写形式存储密钥。您必须使用不区分大小写的查找来获取您在 HTML 中实际使用驼峰式大小写的任何内容。有史以来最糟糕的规格，但感谢您指出，我永远猜不到。

【解决方案2】：

在您当前的脚本中，$(this) 指的是 Window 对象（不是您的按钮），它没有 data- 属性，因此它的 undefined。

你可以通过将元素传递给函数来解决这个问题

<button data-assigned-id="@IdUser" onclick="updateClick(this)" type="button" ... ></button>

function updateClick(element) {
    var id = $(element).data('assigned-id');
    ....

但是更好的方法是使用Unobtrusive Javascript，而不是用行为污染您的标记。

<button data-assigned-id="@IdUser" id="mybutton" type="button" class="btn btn-sm btn-default"></button>

$('#mybutton').click(function() {
    var id = $(this).data('assigned-id'); // $(this) refers to the button
    ....
});

【讨论】：

当我应用此脚本时，知道如何解决主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响？
由于我的答案中的代码，该错误不会发生。我最好的猜测是你的.load() 正在加载一个包含脚本标签的局部视图（如果是这样，删除它 - 局部不应该有脚本）
我的部分和我认为这些对于验证很重要，因为我的部分视图是一个表单
你肯定需要从你的部分中删除那些。将它们移动到主视图（或布局）中
我的验证仍然有效吗？好的，会试一试，非常感谢

【解决方案3】：

就我的用法而言，即使该属性是 data-assignedId（骆驼大小写），在检索它时您也必须使用 data('assignedid')。使用驼峰式套管返回未定义。

【讨论】：