无法使用javascript或jquery获取div中数据集的更新值

Question

I am working on some java script changes for updating the div data attribute values. Below is the detailed explanation.

I have a div with some data attributes and initially when the page loads they are set to some default values.

<div class="offer_option" id="offerView" data-term="24" data-rc="54.99">
   <a href="#" class="customize_offer" id="customize">Select</a>
</div>

Through an Ajax call i am trying to update the "data-rc" value as below.

document.getElementById("offerView").dataset.rc = 100.00;

or

$("#offerView").data('rc', 100.00);

When i click the "select" link the below code will execute

$('.customize_offer').unbind('click').click(function() {
    selectOffer($(this));
});

Below is the "selectOffer" function

function selectOffer(selectButton) {
   var offerOption = selectButton.parents('.offer_option');
   var offerDetails = offerOption.data();
   console.log( offerDetails );
}

The problem is the dataset does not showing the updated value for data-rc in the "offerDetails" variable, instead it is showing an empty value. I have tried with some j query options and java script options but i am not able to get the updated values in the "offerDetails" variable. Please let me know how to fix this.

Thanks, Nagendra

Answer 1

Try

$("#offerView").attr('data-rc', 100.00);

Why it happens?

jQuery .data() is initially populated with values from the data-attributes by using a special cache object inside jQuery to store data .It doesn't change the attribute in the DOM. To change the attribute, you have to use attr()