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

У полі MVC у мене з’явилося таке поле:

@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>

У окремому js-файлі я хочу встановити data-helptextатрибут у строковому значенні. Ось мій код:

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

$(targetField).data("helptext", "Testing 123");

alert()Виклик працює нормально, це показує текст «Старий Текст» в діалоговому вікні попередження. Однак виклик встановити data-helptextатрибут "Тестування 123" не працює. "Старий текст" все ще є поточним значенням атрибута.

Чи неправильно я використовую дзвінок до даних ()? Я подивився це в Інтернеті, і я не бачу, що я роблю не так.

Ось розмітка HTML:

<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />

Про це йдеться в .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 .

Оновлена ​​демонстраційна версія (25.07.2015)

Також дивіться jQuery Data vs 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 для огляду DOM, значення не оновлює значення, як показано на Консолі, але робить.$('#foo').data('helptext', 'Testing 123'); $('#foo').attr('data-helptext', 'Testing 123');

У мене були серйозні проблеми

.data('property', value);

Це не було встановлення data-propertyатрибута.

Розпочато з використання jQuery .attr():

Отримайте значення атрибута для першого елемента в наборі відповідних елементів або встановіть один або кілька атрибутів для кожного відповідного елемента.

.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 () запобігає "невизначеності", а значення даних буде оновлено (поки HTML не буде)

Суть атрибута "data" полягає в прив'язуванні (або "зв'язку") значення з елементом. Дуже схожий на onclick="alert('do_something')"атрибут, який пов'язує дію з елементом ... текст марний, ви просто хочете, щоб дія діяла, коли вони клацали елемент.

Після того, як дані або дії пов'язані з елементом, зазвичай * не потрібно оновлювати HTML, а лише дані або метод, оскільки саме це використовує ваша програма (JavaScript). Ефективність, я не розумію, чому ви хочете так само оновити HTML, ніхто не бачить атрибут html (за винятком Firebug чи інших консолей).

Один із способів, про який можна подумати: HTML (разом з атрибутами) - це лише текст. Дані, функції, об'єкти тощо, які використовуються JavaScript, існують в окремій площині. Тільки тоді, коли JavaScript буде доручено це робити, він буде читати або оновлювати текст HTML, але всі дані та функціональні можливості, які ви створюєте за допомогою JavaScript, діють повністю окремо від тексту HTML / атрибутів HTML, які ви бачите на своїй консолі Firebug (або іншої).

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

Сталося те саме і зі мною. Виявляється, що

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

дає об’єкт, що не записується. Я вирішив це за допомогою:

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

І відтоді dataбув стандартним об'єктом JS, що записується.

Щоб навести цитату:

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

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

Зауважте, що це (відверто дивне ) обмеження утримується лише у використанні .data().

Рішення? Використовуйте .attrзамість цього.

Звичайно, хтось із вас може почувати себе некомфортно, якщо не використовувати цей виділений метод. Розглянемо наступний сценарій:

• "Стандарт" оновлюється так, що частина даних спеціальних атрибутів більше не потрібна / замінюється

Здоровий глузд - Чому вони б змінили такий уже встановлений атрибут? Тільки уявіть собі , classпочати перейменована в групу і 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]);
    }
}

РЕДАКТ: 5/1/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;
};