javascript - 如何在 IE11 中克隆 jQuery 对象及其子对象而不使用引用

Question

我正在尝试克隆一个 jQuery 对象及其子对象，但没有引用。我的理解是 clone() 应该完成此操作，但在 IE11 中，当我第二次尝试将子对象之一附加到周围的空白 div 时，该子对象不再存在。您可以使用 IE11 在我的代码片段中单击“单击我”两次来查看此内容。

我认为我的问题可能是子引用被克隆，因此空白 div 覆盖了它们，但这可能是错误的。到目前为止，clone() 在克隆父元素方面效果最好。我更喜欢使用 jQuery 而不是 getElementsByClassName。我没有运气使用 $.extend(true, {}, $('.allItems'));

如果有任何帮助，我将不胜感激!

window.$allItems = $('.carousel_item').clone();

$('.link').on('click', function(evt) {
  evt.preventDefault();
  
  $('.blue').html('').append('<div id="bills"></div>');
  $('#bills').append($allItems[0]);
});

.blue {
  background-color: #d0e4f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">clickme</a>
<div class="blue">
  <div id="bills">
    <div class='carousel_item'>
      <img src='http://fillmurray.com/150/200'>
      <div>
        <span>Tomatoes</span>
      </div>
    </div>
    <div class='carousel_item'>
      <img src='http://fillmurray.com/200/200'>
      <div>
        <span>Film</span>
      </div>
    </div>
  </div>
</div>

Answer 1

解决了这个问题。

要在附加空白 div 后多次附加轮播项目，我需要在每次调用函数时克隆 DOM 元素。我需要向点击监听器添加一行:

$allItems = $allItems.clone();