Невозможно установить атрибут данных с помощью API jQuery Data ()

Он упоминается в .data() документации.

Атрибуты данных извлекаются при первом доступе к свойству данных, а затем больше не доступны или изменяются (все значения данных затем сохраняются внутри jQuery)

Это также было описано на Почему изменения в jQuery $ .fn.data () не обновляют соответствующие атрибуты html 5 data- *?

Демонстрация моего исходного ответа ниже, похоже, больше не работает.

Обновленный ответ

Опять же, из .data() документации

Обработка атрибутов со встроенными дефисами была изменена в jQuery 1.6, чтобы соответствовать спецификации W3C HTML5.

Итак, для <div data-role="page"></div> верно следующее $('div').data('role') === 'page'

Я почти уверен, что $('div').data('data-role') работал в прошлом, но похоже, что это уже не так. Я создал лучшую витрину, которая ведет журнал в HTML, вместо того, чтобы открывать консоль, и добавил дополнительный пример с несколькими дефисами в camelCase преобразование атрибутов данных.

Обновленная демонстрация (2015-07-25)

Также см. Данные jQuery против Attr?

HTML

<div id="changeMe" data-key="luke" data-another-key="vader"></div>
<a href="#" id="changeData"></a>
<table id="log">
    <tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr>
</table>

JavaScript (jQuery 1.6.2+)

var $changeMe = $('#changeMe');
var $log = $('#log');

var logger;
(logger = function(setter, getter, note) {
    note = note || '';
    eval('$changeMe' + setter);
    var result = eval('$changeMe' + getter);
    $log.append('<tr><td><code>' + setter + '</code></td><td><code>' + getter + '</code></td><td>' + result + '</td><td>' + note + '</td></tr>');
})('', ".data('key')", "Initial value");

$('#changeData').click(function() {
    // set data-key to new value
    logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke");
    // try and set data-key via .attr and get via some methods
    logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda");
    logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)");
    logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object");

    // bonus points
    logger('', ".data('data-key')", "expect undefined (cannot get via this method)");
    logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen <code>data-another-key</code>");
    logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6+)");

    return false;
});

$('#changeData').click();

Старая демонстрация

Исходный ответ

Для этого HTML:

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

и этот JavaScript (с jQuery 1.6.2)

console.log($('#foo').data('helptext'));

$('#changeData').click(function() {
    $('#foo').data('helptext', 'Testing 123');
//  $('#foo').attr('data-helptext', 'Testing 123');
    console.log($('#foo').data('data-helptext'));
    return false;
});

См. демонстрацию

Используя Chrome DevTools Console для проверки DOM, $('#foo').data('helptext', 'Testing 123'); не обновляет значение, как показано в консоли, но $('#foo').attr('data-helptext', 'Testing 123'); делает.

У меня были серьезные проблемы с

.data('property', value);

Он не устанавливал атрибут data-property.

Начат с помощью .attr() jQuery:

Получите значение атрибута для первого элемента в наборе сопоставленных элементов или установите один или несколько атрибутов для каждого сопоставленного элемента.

.attr('property', value)

установить значение и

.attr('property')

чтобы получить значение.

Теперь это просто работает!

В принятом ответе @andyb есть небольшая ошибка. В продолжение моего комментария к его сообщению выше ...

Для этого HTML:

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

Вам нужно получить доступ к атрибуту следующим образом:

$('#foo').attr('data-helptext', 'Testing 123');

но метод данных вроде этого:

$('#foo').data('helptext', 'Testing 123');

Приведенное выше исправление для метода .data () предотвратит "undefined", и значение данных будет обновлено (в то время как HTML не будет).

Смысл атрибута «данные» состоит в том, чтобы связать (или «связать») значение с элементом. Очень похоже на атрибут onclick="alert('do_something')", который связывает действие с элементом ... текст бесполезен, вы просто хотите, чтобы действие работало, когда они щелкают элемент.

Как только данные или действие привязаны к элементу, обычно * нет необходимости обновлять HTML, только данные или метод, поскольку это то, что будет использовать ваше приложение (JavaScript). Что касается производительности, я не понимаю, почему вы все равно захотите обновить HTML, никто не видит атрибут html (кроме Firebug или других консолей).

Один из способов подумать об этом: HTML (вместе с атрибутами) - это просто текст. Данные, функции, объекты и т. Д., Которые используются JavaScript, существуют в отдельной плоскости. Только когда JavaScript получает указание сделать это, он будет читать или обновлять текст HTML, но все данные и функции, которые вы создаете с помощью JavaScript, действуют полностью отдельно от текста / атрибутов HTML, которые вы видите в консоли Firebug (или другой).

* Я делаю акцент на обычно, потому что если у вас есть случай, когда вам нужно сохранить и экспортировать HTML (например, какой-то текстовый редактор с микроформатом / данными), где HTML будет загружен на другой странице, тогда, возможно, вам также понадобится обновить HTML.

Со мной случилось то же самое. Оказывается, что

var data = $("#myObject").data();

дает вам объект, недоступный для записи. Я решил это, используя:

var data = $.extend({}, $("#myObject").data());

И с тех пор data стал стандартным JS-объектом с возможностью записи.

Процитирую цитату:

Атрибуты данных извлекаются при первом доступе к свойству данных, а затем больше не доступны и не изменяются (все значения данных затем сохраняются внутри jQuery).

.data() - Документация jQuery

Обратите внимание, что это (откровенно странное) ограничение распространяется только на использование .data().

Решение? Вместо этого используйте .attr.

Конечно, некоторым из вас может быть неудобно не использовать специальный метод. Рассмотрим следующий сценарий:

• «Стандарт» обновлен, так что часть данных настраиваемых атрибутов больше не требуется / заменяется

Здравый смысл - зачем им так менять уже установленный атрибут? Только представьте, что class начинает переименовываться в group, а id - в идентификатор. Интернет сломается.

И даже тогда сам Javascript может это исправить - и, конечно же, несмотря на печально известную несовместимость с HTML, REGEX (и множество подобных методов) может быстро переименовать ваши атрибуты в этот новый мифический «стандарт».

TL;DR

alert($(targetField).attr("data-helptext"));

Как уже упоминалось, метод .data() на самом деле не устанавливает значение атрибута data- и не считывает обновленные значения, если атрибут data- изменяется.

Мое решение заключалось в том, чтобы расширить jQuery методом .realData(), который фактически соответствует текущему значению атрибута:

// Alternative to .data() that updates data- attributes, and reads their current value.
(function($){
  $.fn.realData = function(name,value) {
      if (value === undefined) {
        return $(this).attr('data-'+name);
      } else {
        $(this).attr('data-'+name,value);
      }
  };
})(jQuery);

ПРИМЕЧАНИЕ. Конечно, вы могли бы просто использовать .attr(), но по моему опыту, большинство разработчиков (также как и я) совершают ошибку, считая .attr() и .data() взаимозаменяемыми, и часто, не задумываясь, заменяют одно на другое. Это может работать большую часть времени, но это отличный способ внести ошибки, особенно при работе с любым типом динамической привязки данных. Таким образом, используя .realData(), я могу более четко определить предполагаемое поведение.

Была такая же проблема. Поскольку вы все еще можете получать данные с помощью метода .data (), вам нужно только выяснить способ записи в элементы. Это вспомогательный метод, который я использую. Как говорят многие, вам придется использовать .attr. У меня он заменяет любой _ на - насколько я знаю, он это делает. Я не знаю других персонажей, которые он заменяет ... однако я не исследовал это.

function ExtendElementData(element, object){
    //element is what you want to set data on
    //object is a hash/js-object
    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
}

РЕДАКТИРОВАТЬ: 01.05.2017

Я обнаружил, что все еще были случаи, когда вы не могли получить правильные данные с помощью встроенных методов, поэтому сейчас я использую следующее:

function setDomData(element, object){
    //object is a hash

    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
};

function getDomData(element, key){
    var domObject = $(element).get(0);
    var attKeys = Object.keys(domObject.attributes);

    var values = null;
    if (key != null){
        values = $(element).attr('data-' + key);
    } else {
        values = {};

        var keys = [];
        for (var i = 0; i < attKeys.length; i++) {
            keys.push(domObject.attributes[attKeys[i]]);
        }

        for (var i = 0; i < keys.length; i++){
            if(!keys[i].match(/data-.*/)){
                values[keys[i]] = $(element).attr(keys[i]);
            }
        }
    }
    return values;
};