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中我得到了错误

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

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

Answer 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搜索的属性元素，将骆驼字符串转换为虚线字符串然后将数据添加到结果中。因此，字符串lastValue被转换数据最后值。

我没有注意到你对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'));
}

Working fiddle

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

Answer 3

就我的使用而言，即使属性是 data-assignedId (Camel cased)，在检索它时您也必须使用 data('assignedid')。使用驼峰式外壳返回未定义。

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

3 个答案: