jQuery.data ('ABC', 'хуг') не изменяя данные-а

Question

У меня есть рабочая функция:

$('#hints').after(
    '<a href="#" id="hint" class="btn btn-large btn-success" data-toggle="popover" title="" data-content="Hint 1 Content" data-original-title="Hint 1 Title">Hint 1</a>' 
) 

Я пытаюсь редактировать data-content="Hint 1 Content" с JQuery.

Моя функция:

function loadContent(riddle) { 
    $('#hint').data('content','h1 content') 
} 

Тогда я называю loadContent(RIDDLE), но это не меняет data-content тега в моем <a> теге.

Answer 1

data атрибуты сопоставляются с объектом dataset объекта DOM Element, ваш код должен работать, вы не видите, что он изменен, поскольку он является свойством, а не атрибутом.

$('#hint').data('content','h1 content') 
console.log($('#hint').data('content')) // 'h1 content' 

Если вы хотите изменить атрибут можно использовать attr метод вместо data метода, однако, отметить, что JQuery обрабатывает data-* иначе, чем dataset свойства (, которая не поддерживается в старых браузерах + IES).

Answer 2

Это должно сработать. Возможное решение вашей проблемы: создаете ли вы более одного элемента с тем же id?.

Попробуйте также это более многословным, и использовать console.log для проверки:

var el = $('<a href="#" id="hint">Hint 1</a>').data('abc', 'xyz'); 
console.log(el.data('abc')) 
$('#hints').after(el) 
console.log($("#hint").data('abc'))