javascript - jQuery data() 无法写入 HTML 元素？

Question

这个问题已经有答案了:

Data attribute value updated by jquery is not visible in DOM (2 个回答)

已关闭 5 年前。

HTML:

<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

jQuery:

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").data("catid", catid);
});

catid正在正确检索，但未添加到输入元素。这是怎么回事？我该如何解决这个问题？

Answer 1

您需要使用.attr()如果您希望数据在DOM中可见。

注意:catid 不是“允许”的属性。你应该写 data-catid read more about it here

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").attr("data-catid", catid);  // see changes in this line
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

更新 .data()确实有效!但正如文档所说:值只是设置为元素并不意味着它在 DOM 中可见。

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").data("catid", catid);
  
  // now "catid" is set to .search-input
  // it's just not visible in DOM 
  console.log('catId: ' + $(".search-input").data("catid"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>