jQuery after replacing attribute value getting old value

Question

I have span after img with attribute as clb-prodctid and its value is 280.

It is a close image & has background close image.

I am using function to replace data-clb-prodctid="280" to data-clb-prodctid="281"

Replace is working fine and it assigns new value properly.

But when I try to get the value, it gives me old value as 280.

After page refresh I get new value as 281.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <img name="plus_icon" class="club_imgs imagefile club_imgs_1" data-clubprodnum="280" src="square.jpg">
    <span class="close_button close-btn-icon" onclick="removeproduct(this)" data-clb-prodctid="280">X</span>

    <script>
        function removeproduct(datas){                
            var remove_productId = jQuery(datas).data("clb-prodctid");

            alert(remove_productId);

            jQuery(".club_imgs_1").next('span').attr('data-clb-prodctid',281);                    
        }
    </script>
</body>
</html>

You are changing the `attr` on `.club_imgs_1` but it dont have an attribute called `data-clb-prodctid` Think you have to change `jQuery(".club_imgs_1")` to `jQuery(datas)` — Carsten Løvbo Andersen, Mar 17 '17 at 09:56
Possible duplicate of [jQuery Data vs Attr?](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) — Mehdi Dehghani, Mar 17 '17 at 10:07

score 4 · Accepted Answer · answered Mar 17 '17 at 09:56

The issue is because you're using data() to read the data from jQuery's cache, but attr() to set the new value in the DOM only. Hence the new value is ignored.

To fix this use the setter of data(), like this:

jQuery(function($) {
  $('.close_button').click(function() {
    var remove_productId = $(this).data("clb-prodctid");
    console.log(remove_productId);
    $(".club_imgs_1").next('span').data('clb-prodctid', 281);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img name="plus_icon" class="club_imgs imagefile club_imgs_1" data-clubprodnum="280" src="square.jpg">
<span class="close_button close-btn-icon" data-clb-prodctid="280">X</span>

Also note the preferred use of an unobtrusive event handler over an outdated on* event attribute in the above example.

KAD · Answer 2 · 2017-03-17T09:58:41.597

1

Set the data and not the attr :

 jQuery(".club_imgs_1").next('span').data('clb-prodctid',281);

edited Mar 17 '17 at 09:58

answered Mar 17 '17 at 09:57

KAD

10,972
4
31
73

Just FYI it should be `.data('clb-prodctid', 281);` – Rory McCrossan Mar 17 '17 at 09:58

score 0 · Answer 3 · answered Mar 17 '17 at 10:04

0

and in addition it would be better if you use .on('click',()) rather than .click method, these two act different when you work with dynamic elements.

answered Mar 17 '17 at 10:04

Jamil Alisgenderov

1,448
2
12
23

1

Your answer is not quite accurate. `on('click', fn)` and `click(fn)` are identical in behaviour. You're getting confused with the delegated event handler which is `$('parentSelector').on('click', 'childSelector', fn);` – Rory McCrossan Mar 17 '17 at 10:16

jQuery after replacing attribute value getting old value

3 Answers3