为什么 jQuery 数据不能与追加一起使用？
Why jQuery data won't work with append?
我正在将数据从服务器附加到无序列表，但是使用 data() 设置 data-id 属性不起作用，但是 attr() 可以。
使用data()时：
追加 <li>Home</li>
$('#menu').append($('<li>').text("Home").data('id', 5));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
</ul>
使用attr()时：
追加 <li data-id="5">Home</li>
$('#menu').append($('<li>').text("Home").attr('data-id', 5));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
</ul>
我知道我可以像这样附加它，但更喜欢第一个选项。
$('#menu').append('<li data-id="5">Home</li>');
.data() 方法将读取 data-* 属性作为辅助功能。但它首先尝试做的是从 jQuery 的内部缓存中读取数据作为键值对（附加到元素）。
要点是，反之则行不通。 IE。 .data() 不会将属性放在元素上。它只会将数据存储在 jQuery 的内部缓存中以与该元素相关联。
我正在将数据从服务器附加到无序列表，但是使用 data() 设置 data-id 属性不起作用，但是 attr() 可以。
使用data()时：
追加 <li>Home</li>
$('#menu').append($('<li>').text("Home").data('id', 5));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
</ul>
使用attr()时：
追加 <li data-id="5">Home</li>
$('#menu').append($('<li>').text("Home").attr('data-id', 5));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
</ul>
我知道我可以像这样附加它，但更喜欢第一个选项。
$('#menu').append('<li data-id="5">Home</li>');
.data() 方法将读取 data-* 属性作为辅助功能。但它首先尝试做的是从 jQuery 的内部缓存中读取数据作为键值对（附加到元素）。
要点是，反之则行不通。 IE。 .data() 不会将属性放在元素上。它只会将数据存储在 jQuery 的内部缓存中以与该元素相关联。