Change html data attribute value

Question

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).attr('data-bla', "2");  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

Run codeHide result

So, I need to change the value data-blafrom "1" to "2", but, as you can see, the value is not updated, and each click on the button warns the default value of "1".

What have I done wrong?

Answer 1

data() not an access function for attributes data-*. This is an accessor for the jQuery data cache for an element that is initialized only from attributes data-*.

data-bla, attr("data-bla"), data("bla"). bla, data("bla", newValue), attr("data-bla", newValue).

, attr() get set, , data() , , .

attr():

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).attr('data-bla') );
  	    $(this).attr('data-bla', "2");  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

Hide result

data():

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).data('bla', "2");  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

Hide result

Answer 2

attr() , . , data() .

$(document).ready(function() {
  $("#bla").on("click", function() {
    alert($(this).data('bla'));
    $(this).data('bla', "2");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

Hide result

: jQuery Data vs Attr?

Answer 3

.data('bla'), : -)

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).data('bla', "2");  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

Hide result