Why jQuery cant get updated data-id

Question

As you can see on click i change data-id on button .dropdown-toggle if you check in browser inspect element menu you will see data-id is change everytime when you click different a element but console.log show everytime same data-id, any ideas why this and how to fix it ?

$(document).on('click', '.dropdown-menu a', function(){

 var id = $(this).data('id');

    $('.dropdown-toggle').html($(this).text() +'<span class="caret"></span>');
    $('.dropdown-toggle').attr('data-id', ''+id+'');
    
 console.log($('.dropdown-toggle').data('id'));
})

$('ul li').on('click', function(){
 var id = $('.dropdown-toggle').data('id');
 
console.log(id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-3">
  <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a data-id="1" class="dropdown-item" href="#">Action</a>
    <a data-id="2" class="dropdown-item" href="#">Another action</a>
    <a data-id="3" class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
</div>

<div class="col-md-3">
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
  </ul>
  
</div>

you can solve your problem by using `this` , because with your code you will get always the first match item, so replace as follow: `console.log($(this).data('id'));` — B.S., Jan 05 '21 at 08:55

Giorgos Betsos · Accepted Answer · 2021-01-05T09:19:50.207

You can simply use jQuery data() method to set the id value:

$(document).on('click', '.dropdown-menu a', function() {

  var id = $(this).data('id');

  $('.dropdown-toggle').html($(this).text() + '<span class="caret"></span>');
  $('.dropdown-toggle').data('id', id);

  console.log($('.dropdown-toggle').data('id'));
})

$('ul li').on('click', function() {

  var id = $('.dropdown-toggle').data('id');

  console.log(id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-3">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a data-id="1" class="dropdown-item" href="#">Action</a>
      <a data-id="2" class="dropdown-item" href="#">Another action</a>
      <a data-id="3" class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</div>

<div class="col-md-3">
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
  </ul>

</div>

Why jQuery cant get updated data-id

1 Answers1