documentFragment.cloneNode(true) doesn't clone jQuery data

Posted by taber on Stack Overflow See other posts from Stack Overflow or by taber
Published on 2010-05-14T01:58:41Z Indexed on 2010/05/14 2:04 UTC
Read the original article Hit count: 283

I have a documentFragment with several child nodes containing some .data() added like so:


myDocumentFragment = document.createDocumentFragment();
for(...) {
  myDocumentFragment.appendChild(
    $('').addClass('button')
      .attr('href', 'javascript:void(0)')
      .html('click me')
      .data('rowData', { 'id': 103, 'test': 'testy' })
      .get(0)
  );
}

When I try to append the documentFragment to a div on the page:

$('#div').append( myDocumentFragment );

I can access the data just fine:

alert( $('#div a:first').data('rowData').id ); // alerts '103'

But if I clone the node with cloneNode(true), I can't access the node's data. :(

$('#div').append( myDocumentFragment.cloneNode(true) );
...
alert( $('#div a:first').data('rowData').id ); // alerts undefined

Has anyone else done this or know of a workaround? I guess I could store the row's data in jQuery.data('#some_random_parent_div', 'rows', [array of ids]), but that kinda defeats the purpose of making the data immediately/easily available to each row.

I've also read that jQuery uses documentFragments, but I'm not sure exactly how, or in what methods. Does anyone have any more details there?

Thanks!

© Stack Overflow or respective owner

Related posts about documentfragment

Related posts about jQuery