jquery - 要素に .data() を設定できません

Question

動的に追加された要素にデータを追加できません:

var newItem = "<li>" + poi.Title + "</li>";
$(newItem).data('poiID', poi.ID);
$(newItem).data('poiTitle', poi.Title);

私はこれを追加しようとしました:

alert($(newItem).data('poiID'));

上記の行の直後ですが、「未定義」になり続けています。

Answer 1

コードを次のように変更します。

var newItem = $("<li>" + poi.Title + "</li>");
newItem.data('poiID', poi.ID);
newItem.data('poiTitle', poi.Title);

...

alert(newItem.data('poiID'));

フィドルの例: http://jsfiddle.net/P4HWb/

Answer 2

これは、毎回$(newItem)新しい要素を作成していて、実際にはその要素への参照を保存していないためです。

試す：

var newItem = $("<li>" + poi.Title + "</li>");  /* create element as newItem */
newItem.data('poiID', poi.ID);                  /* add data to existing elem */
alert(newItem.data('poiID'));                   /* peek at your data */

この時点では、新しい要素はまだ DOM にアタッチされていないことに注意してください。ページに表示するには、、 などnewItemのメソッドを使用して添付する必要があります。append()prepend()

Answer 3

あなたnewItemはまだDOMにありません。それを追加.data()すると、それに追加できます。

または、このようなこともできます。

var newItem = $("<li>" + poi.Title + "</li>");
$(newItem).data('poi', poi); //That way the whole object is added to the element.

次に、DOM に追加します。