jQuery data（）无法写入HTML元素？ [重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery data（）无法写入HTML元素？ [重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
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元素中。怎么来，我该怎么解决这个问题？
答案
如果你想让.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>另一答案
未添加到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>以上是关于jQuery data（）无法写入HTML元素？ [重复]的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 将选择器元素的 html 写入 textarea
利用ajax动态生成元素Jquery无法获取新创建的元素的解决方法
使用 Javascript 或 jQuery 将元素写入子 iframe