jQuery data（）无法写入HTML元素？ [重复]

Question

这个问题在这里已有答案：

• Data attribute value updated by jquery is not visible in DOM 2回答

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，但未添加到input元素中。怎么来，我该怎么解决这个问题？

Answer 1

如果你想让.attr()在DOM中可见，你需要使用data。

注意：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>

Answer 2

未添加到input元素

正确，这不是.data()如何工作。当使用.data()添加数据时，它存储在jquery内部，所以你通过jquery再次读取它，而不是通过查看html或使用vanilla javascript来读取它。

初始值将从任何匹配的data-属性中读取，但之后它将使用内部值。

例：

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

$(".readdata").click(function() {
  console.log($(".search-input").data())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type='button' class="readdata">Read Data</button>
<button type='button' class="add-new-item" data-catid="1">Add Data</button>

<input class="search-input" type="text" name="search" placeholder="Start typing to search">

<button type='button' class="readdata">Read Data</button>

还有一点不同，.data()会尝试为你推断数据类型（所以你可以得到一个数字），而.attr()将永远是一个字符串。