Доступ к атрибуту данных с помощью jQuery возвращает undefined?

внутри моего зрения у меня есть кнопка, как показано ниже:

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

идентификатор всегда отображается как неопределенный, я проверил и @IdUser всегда имеет значение

затем в chrome dev я получил ошибку

GET http://localhost:19058/Users/UpdatePartial?id=undefined 400 (Неправильный Запрос)

есть идеи, как это исправить?

6
custom-data-attribute jquery

2 ответов

в текущем скрипте, $(this) относится к Window объект (не ваша кнопка), который не имеет это undefined.

вы можете решить эту проблему, передав элемент в функцию

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

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

однако лучший подход-использовать Ненавязчивый 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
    ....
});
3

при чтении атрибутов данных с помощью data() вам нужно удалить - и регистр значение. Итак, вы хотите:

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

на docs on data () показать это:

начиная с jQuery 1.4.3 HTML 5 data-атрибуты будут автоматически подъехал к объекту данных 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-атрибут последнего значения элемента. В случае отсутствия данных с переданным ключом jQuery выполняет поиск среди атрибутов элемент, преобразующий строку в верблюжьей шкуре в пунктирную строку, а затем добавления данных к результату. Таким образом, строка 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'));
}

рабочая скрипку

7