將數據屬性添加到jquery中尚未插入到DOM的元素中

因此，我基本上將一些元素添加到DOM中。在它們存在之前，我可以在它們上使用類似.addClass的方法，並將該類與元素一起附加到DOM，但是當我使用.data（）方法添加數據屬性時，數據不會附加到與元素的DOM。我在這裏錯過了什麼，或者我真的必須等到DOM中的元素存在才能將數據添加到DOM中？將數據屬性添加到jquery中尚未插入到DOM的元素中

PS。使用jQuery 1.9.1

HERES A FIDDLE FOR YOU TO PLAY WITH

var widget = $("<div>"); 
widget.addClass("banana"); 
widget.data('color', 'brown'); 
widget.appendTo('#container');

HTML

<div id="container"> 

</div>

而且那裏有一些不錯的CSS有那麼你知道在哪裏點擊檢查，看看數據屬性不是（或者希望）被添加。

我預期的結果是

<div id="container"> 
    <div class="banana" data-color="brown"></div> 
</div>

乾杯。

來源

2013-08-19 Rooster

你有把握嗎？你有沒有試過登錄它？ –

@RicardoLohmann當我檢查元素我沒有看到數據被添加到它在DOM – Rooster

@RicardoLohmann但也許這只是一個奇怪的jsfiddle怪癖？ – Rooster

的.data() method不創建[data-*]屬性的DOM節點。它只是將數據對象與DOM節點相關聯。它確實初始化值從[data-*]屬性，如果存在，但這不是一回事。

如果您需要設定明確的[data-*]屬性值（如造型鉤與CSS），那麼你需要使用.attr()

來源

2013-08-19 21:13:01 zzzzBov

啊。我懂了。在閱讀你發佈的鏈接和這個答案後，我明白了爲什麼我感到困惑。我通常不會像在這裏使用.data（）那樣使用它。感謝您爲我做的研究！ – Rooster

這似乎爲我工作，

var widget = $("<div>"); 
widget.addClass("banana"); 
jQuery.data(widget, 'color', 'brown'); 
widget.appendTo('#container'); 
console.log(jQuery.data(widget));

更新小提琴：http://jsfiddle.net/rTfvG/3/

來源

2013-08-19 21:03:07 PherricOxide

當我檢查元素我沒有看到數據被添加到它的DOM仍然，但也許這是一個jsfiddle怪癖> – Rooster

@Rooster，這不是一個jsFiddle怪癖。數據位於DOM中，但未在[data- *]屬性中顯示。 –

將數據屬性添加到jquery中尚未插入到DOM的元素中

回答

相關問題