javascript - 使用选择器再次调用 data() 时，动态创建元素并附加数据的 JQuery 不返回值？

Question

我动态创建一个 div 元素并将 data() 与其关联。当通过选择器再次访问它时，它不会返回数据。作为下面代码片段的结果，我看到第一个警报的数据为“1”，另一个警报的数据为“null”值。有人可以帮忙吗？

var dc = 0;
$("#attachData").click(function () {
         dc++;
  var newDiv = jQuery('#oldid').clone();
  newDiv.attr('id', 'dt'+dc);
  jQuery.data(newDiv, "dd", '1')

   alert(jQuery.data(newDiv, "dd"));

 var divFromSelector = $('#dt'+dc);
 alert(jQuery.data(divFromSelector, "dd"));
});

<小时/>

抱歉，我没有将其添加到代码片段中，而是将其附加到树上:

newDiv.attr('id', 'dt'+dc).
appendTo('#workspace-container'); 

此外，当我尝试使用选择器访问它时，元素会正确返回 - 但找不到数据。

Answer 1

尝试:

var dc = 0;
$("#attachData").click(function () {
     dc++;
  var newDiv = jQuery('#oldid').clone();
  newDiv.attr('id', 'dt'+dc).appendTo('#workspace-container');
  jQuery.data(newDiv[0], "dd", '1')

  alert(jQuery.data(newDiv[0], "dd"));

  var divFromSelector = $('#dt'+dc);
  alert(jQuery.data(divFromSelector[0], "dd"));
});

来自the docs似乎 JQuery.data 方法需要 DOM 元素，而不是 JQuery 对象。将 [0] 附加到 JQuery 对象会给出它所包装的 DOM 元素。

如果您使用 newDiv.data(...) 和 divFromSelector.data(...) 可能会更好。

演示 here .