CODEWITHSUNDEEP
jquery
Nitz
Nitz

Reputation: 145

jQuery after replacing attribute value getting old value

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>

Upvotes: 4

Views: 2204

Answers (3)

Jamil Alisgenderov
Jamil Alisgenderov

Reputation: 1708

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.

Upvotes: 0

KAD
KAD

Reputation: 11112

Set the data and not the attr :

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337590

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.

Upvotes: 4

Related Questions