为什么jQuery数据不适用于追加？

Question

我将数据从服务器附加到无序列表,但设置data-id属性data()不起作用,但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>');

Answer 1

该.data()方法将data-*属性作为辅助函数读取.但它首先尝试做的是从jQuery的内部缓存中读取数据作为键值对(附加到元素).

主要的外卖是,它不起作用.即.data()不会在元素上放置属性.它只会将数据存储在jQuery的内部缓存中,以与该元素相关联.