动态自定义属性未显示

Question

我有以下代码，它是动态循环的一部分，并创建了一个具有 1 列和 4 行的新网格。第四行有一个按钮：

var elem = $(this,'a[data-itemid]');
$(elem).prop('data-itemid', '"'+value+'"');
console.log($(elem).prop('data-itemid'));
console.log(elem);

使用开发者控制台，绘制方式如下：

<a data-role="button" name="orderButton" dsid="orderButton" class="menuMaster_orderButton    ui-link ui-btn ui-btn-b ui-icon-none ui-btn-icon-nowhere ui-shadow ui-corner-all" id="menuMaster_orderButton" data-corners="true" data-icon="none" data-iconpos="nowhere" data-mini="false" data-theme="b" tabindex="7" role="button">Order!</a>

当它循环遍历每条记录时，我有上面的代码，它应该添加一个名为“data-itemid”的新属性和一个值。在这一行：

console.log($(elem).prop('data-itemid'));

它给了我正确的价值。所以我知道它正在添加新属性。但我不认为它会添加它，因为我根本找不到它。

console.log(elem);

这给了我：

[Window, jquery: "1.9.1", constructor: function, init: function, selector: "", size: function…]

哪个不是元素:(

更新：

这是我在循环中使用的按钮：

$(this,'a[name=orderButton]').data('itemid', value);

这是用于在点击时获取它的内容：

console.log('itemid= '+$(this, 'a[name=orderButton]').data('itemid'));

以上返回未定义。

Answer 1

jQuery 将所有data 属性存储在内存中的对象中以提高性能。在 DOM 加载后添加到元素的任何属性都仅存储在此对象中，并且不会在 HTML 源中可见。

您可以通过使用data() 检索data 属性来验证它是否已设置。请勿使用prop('data-x') 或attr('data-x');，因为以上原因不保证属性存在，而且速度较慢。

考虑到这一点，您的第一个示例应该是：

var elem = $(this,'a[data-itemid]');
$(elem).data('itemid', value);
console.log($(elem).data('itemid'));
console.log(elem);