Tenga en cuenta que jQuery .data() no se actualiza cuando cambia los atributos html5 data- con javascript.

Si utiliza jQuery .data() para establecer atributos data- en elementos HTML, es mejor que utilice jQuery .data() para leerlos. De lo contrario, puede haber inconsistencias si actualiza los atributos dinámicamente. Por ejemplo, véase setAttribute(), dataset(), attr() abajo. Cambie el valor, presione el botón varias veces y vea la consola.

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

También puedes usar lo siguiente attr;

HTML

<div id="mydiv" data-myval="JohnCena"></div>

Script

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

O

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

Solución javascript de vainilla

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

• Usando DOM's getAttribute() propiedad

   var brand = mydiv.getAttribute("data-myval")//returns "10"
   mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
   mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely
  

• Usando JavaScript dataset propiedad

  var myval = mydiv.dataset.myval     //returns "10"
  mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
  mydiv.dataset.myval = null          //removes "data-myval" attribute
  

Si estás usando jQuery, usa .data():

div.data('myval', 20);

Puede almacenar datos arbitrarios con .data(), pero está restringido a solo cadenas cuando usa .attr().

[jQuery] .data() vs .attr () vs .extend ()

El método jQuery .data() actualiza un objeto interno administrado por jQuery mediante el uso del método, si estoy en lo correcto.

Si desea actualizar su data-attributes con un poco de propagación, utilice {

$('body').attr({ 'data-test': 'text' });

Otherwise de lo contrario, $('body').attr('data-test', 'text'); funcionará bien.

Otra forma de lograr esto es usando --

$.extend( $('body')[0].dataset, { datum: true } );

Restricts que restringe cualquier cambio de atributo a HTMLElement.prototype.dataset, no cualquier adicional HTMLElement.prototype.attributes.