使用jquery访问数据属性会返回undefined吗？

Question

在我的视图中,我有一个按钮如下:

<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(错误请求)

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

Answer 1

使用时读取数据属性data()需要删除-和驼峰值的值.所以你要:

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

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将在元素的属性中进行搜索,将camel-cased字符串转换为虚线字符串,然后将数据添加到结果中.因此,字符串lastValue将转换为data-last-value.

我没有注意到你如何绑定click事件.如果要使用$(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'));
}

工作小提琴

Answer 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
    ....
});