CODEWITHSUNDEEP
javascriptjquery
Get Off My Lawn
Get Off My Lawn

Reputation: 36311

data-* doesn't update after click

I am trying to update data-coords (11th line), but when I do it the code runs but the data-coords don't update. Why? It looks valid 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 portion (This is inside a 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

(Don't refresh the page during this process)

If you click on one of the images, it will open in a viewer .

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

Upvotes: 3

Views: 148

Answers (2)

Kaeros
Kaeros

Reputation: 1138

You should use the data method.

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

or

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

works in jsfiddle.

You can see your data attributes with:

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

Upvotes: 3

Andy
Andy

Reputation: 30135

The way the data- attributes work is that the value gets copied into the jQuery data object on page load. After that they aren't really connected anymore. So if you change the attribute, the object won't update automatically. Same for the other way around.

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 that way the internal data-object remains the same because they aren't connected anymore.

The data-attribute is only really used to initialize the data object with a startvalue. But after that, as said before, you should only work with jQuery's data function to change the internal data object.

Upvotes: 1

Related Questions