Menu
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>
525
asked Oct 17 '25 08:10
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.
193
Set the data and not the attr :
jQuery(".club_imgs_1").next('span').data('clb-prodctid',281);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
