时间戳

首页 > 解决方案 > 为什么 jQuery 无法获取更新的数据 ID

javascript - 为什么 jQuery 无法获取更新的数据 ID

问题描述

正如您在单击时看到的那样，如果您签入浏览器检查元素菜单，我会在按钮 .dropdown-toggle 上更改数据 ID，您将看到每次单击不同元素时数据 ID 都会发生变化，但 console.log 每次都显示相同的数据 ID ，任何想法为什么会这样以及如何解决它？

$(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>

标签： javascriptjquery

解决方案

您可以简单地使用 jQuery data()方法来设置 id 值：

$(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>

推荐阅读