Accessing data attribute using jquery returns undefined?

问题

Inside my view i have a button as follow:

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

My div

<div id="partial_load_div">

</div>

Script

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

The id is always shows as undefined, i checked and @IdUser has always value

then in chrome dev i got the error

GET http://localhost:19058/Users/UpdatePartial?id=undefined 400 (Bad Request)

Any idea how to fix this?

回答1:

In your current script, $(this) refers to the Window object (not your button) which does not have a data- attribute so its undefined.

You could solve this by passing the element to the function

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

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

However a better approach is to use Unobtrusive Javascript rather than polluting your markup with behavior.

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

回答2:

When reading data attributes using data() you need to remove the - and camel case the value. So you want:

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

the docs on data() show this:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

For example, given the following HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
All of the following jQuery code will work.
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
The second statement of the code above correctly refers to the data-last-value attribute of the element. In case no data is stored with the passed key, jQuery searches among the attributes of the element, converting a camel-cased string into a dashed string and then prepending data- to the result. So, the string lastValue is converted to data-last-value.

I didn't notice how your binding the click event. If you want to use $(this) you have to bind the event using jquery. So you need:

<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

来源：https://stackoverflow.com/questions/36451233/accessing-data-attribute-using-jquery-returns-undefined

标签

jquery

custom-data-attribute