data- * не обновляется после нажатия

Question

Я пытаюсь обновить data-coords (11-я строка), но когда я делаю это, код запускается, но data-coords не обновляется. Зачем? Мне кажется, я что-то упустил?

$(document).on('click', '.next-prev-js', function (e) { 
    var item = e.target; 
    if($(item).is("img") && tagging){ 
     var offset = $(item).offset(); 
     var imgid = $(item).attr("data-image-id"); 
     var obi = $("#blackout-image").offset(); 
     x = (e.clientX - offset.left); 
     y = (e.clientY - offset.top); 
     addTag(e.clientX - obi.left - 55, e.clientY - 55); 
     saveCoords(x, y, imgid); 
     $(item).attr("data-coords", x+","+y); 
     tagging = false; 
     $(".tag-self").text("Tag yourself"); 
     $("#blackout-image img").css({cursor: "pointer"}); 
     $("#blackout-image .face").delay(3000).fadeOut("fast"); 
     return false; 
    } 
    var action = $(item).attr("data-action"); 
    nextPrevImage(action); 
    return false; 
}); 

Вот HTML часть (Это внутри PHP эхо заявление):

<a class='thumb-photo' href=''> 
    <img class='thumb-img' data-coords='$x,$y' data-id='$id' data-image-id='$imid' data-file='$f' src='/user-data/images/image.php?id=$id&file=$f&height=240&width=240' width='240' height='240' /> 
</a> 

Demo

(Не обновляйте страницу во время этого процесса)

Если вы нажмете на одно из изображений, оно откроется в окне просмотра.

• На левом парение над «Где Он» и квадрат покажет, где данные-Coords является (с уменьшенного изображения)
• Затем нажмите на «Tag себя», а затем нажмите на месте в образ.
• Закройте средство просмотра, нажав «esc» или нажав на прозрачную область.
• Кликните по изображению еще раз и наведите указатель мыши на «Где он», то все еще остаются старыми коордами, но они должны были быть обновлены после вас нажал на новое место

http://wows.phpsnips.com/profile.php?id=1&tab=photos

Answer 1

Вы должны использовать метод data.

$(item).data({coords: x+","+y}); 

или

$(item).data("coords", x+","+y); 

работает в jsfiddle.

Вы можете видеть ваши данные атрибуты с:

console.log($(item).data()); 

Answer 2

Путь работы data- атрибуты является то, что значение копируется в объект данных JQuery на странице загрузки. После этого они больше не связаны. Поэтому, если вы измените атрибут, объект не будет автоматически обновляться. То же самое для другого.

Я сделал быстрый тест, чтобы продемонстрировать поведение:

JQuery:

var $d = $('div'); 
alert('Load: Attribute "a" gets copied to data object.\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test')); 

$d.attr('data-test','b'); 
alert('Changed attribute to "b". Attribute changed, object still "a".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test')); 

$d.data('test','c'); 
alert('Changed data object to "c". Object changed, attribute still "b".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test')); 

Демо:
http://jsfiddle.net/F5qkq/

Так что в вашем случае, вы только изменить данные атрибут с attr, но таким образом внутренний объект данных остается тем же b потому что они больше не связаны.

Атрибут data используется только для инициализации объекта данных с помощью начального значения.Но после этого, как говорилось ранее, вы должны работать только с функцией jQuery data для изменения внутреннего объекта данных.