documentFragment.cloneNode(true) 不克隆 jQuery 数据

Question

我有一个包含几个子节点的 documentFragment，其中添加了一些 .data()，如下所示：

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

当我尝试将 documentFragment 附加到页面上的 div 时：

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

我可以正常访问数据：

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

但是如果我用 cloneNode(true) 克隆节点，我就无法访问节点的数据。 :(

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

有其他人这样做过或知道解决方法吗？我想我可以将行的数据存储在 jQuery.data('#some_random_parent_div', 'rows', [array of ids]) 中，但这有点违背了让数据立即/轻松地提供给每一行的目的。

我还读到 jQuery 使用 documentFragments，但我不确定具体如何使用，或者使用什么方法。有没有人有更多的细节？

重新编辑：.clone(true)

$(globalObj).data('fragment', { frag: $(mydocumentFragment).clone(true) });

$(myDocumentFragment).clone(true).appendTo('#div');

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

Answer 1

当您执行$('a') 时，您正在创建一个jQuery 对象，但是当您使用get(0) 并使用appendChild 将其附加到您的片段时，您将其留在后面。因此，如果您在片段上使用本机 .cloneNode(true)，jQuery 不会意识到它，因此不会为您管理数据。

只要您的大部分工作都使用 jQuery，我会说放弃 documentFragment，只需将您的 a 元素填充到 jQuery 对象中，然后 clone() 即可。

我认为在这种情况下使用片段不会有任何好处。