Data- * is not updated after clicking
I'm trying to update data-coords
(11th line), but when I do, the code is executed but data-coords
not updated. What for? This looks correct to me, am I missing something?
$(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;
});
Here is the HTML part (this is inside the php echo statement):
<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
(Do not refresh the page during this process)
If you click on one of the images, it will open in the viewer.
- On the left, hover your mouse over Where is it and a square will show you where the data coordinates are (from a thumbnail image).
- Then click Tag yourself, then click a location on the image.
- Close the viewer by pressing "esc" or clicking on the transparent area
- Click on the image again and hover your mouse over "Where is He", meaning there are still old coordinates, but they should have been updated after clicking on the new location.
source to share
The way to use attributes data-
is that the value is copied into the jQuery data object on page load. After that, they are no longer connected. Therefore, if you change the attribute, the object will not update automatically. The same goes for the other.
I made a quick test to demonstrate the behavior:
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'));
Demo:
http://jsfiddle.net/F5qkq/
So, in your case, you only change the data attribute with attr
, but this way the internal data object remains the same because it is no longer connected.
The data attribute is only used to initialize a data object with an initial value. But after that, as said earlier, you only have to work with the jQuery function data
to modify the internal data object.
source to share