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>
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.
Set the data and not the attr :
jQuery(".club_imgs_1").next('span').data('clb-prodctid',281);
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.