JQuery on dynamically creating element and attaching data does not return value when calling data() again using selector?

I create a div element dynamically and associate data() to it. When accessing it again via selector it does not return the data. As result of below snippet I see first alert with data '1' and another with 'null' value. Can someone please help.

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"));
});

---

Sorry, I did not add it in the snippet but its attached to the tree:

newDiv.attr('id开发者_如何学C', 'dt'+dc).
appendTo('#workspace-container'); 

Also when I try to access it using selector the element is returned correctly - but no data found.

---

Try:

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"));
});

From the docs it seems that the JQuery.data method expects a DOM element, not a JQuery object. Appending [0] to a JQuery object gives the DOM element it is wrapping.

It'd probably be better if you used newDiv.data(...) and divFromSelector.data(...).

Demo here.

---

It looks like you haven't attached the new node in the DOM your accessing. http://api.jquery.com/clone/