尝试移动表单时，使用jQuery.detach（）进行不必要的克隆行为

Question

我想根据屏幕尺寸在Woo Commerce产品页面上移动表格的位置。

检测到移动断点时，我想将表单移动到另一个元素上方，以使其更靠近移动屏幕的顶部。

当我使用

let detached = jQuery(form).detach();

该表单将按预期方式删除，但是当我使用

重新附加到页面时

jQuery(detached).insertBefore(description);

我收到重复的表格。

以下是完整的相关代码：

"use strict";

let productPage = {
  mobileBreakpoint: 768,
  lastKnownSize: 0,
  init: function() {
    this.lastKnownSize = jQuery(window).width();
    this.applyCssFixes();

    if (this.lastKnownSize <= this.mobileBreakpoint) {
      this.onMobileView();
    }

    jQuery(window).on('resize', () => {
      this.onResize();
    });
  },
  getAddToCartElement: function() {
    return jQuery('.product form.cart');
  },
  getDescriptionElement: function() {
    return jQuery('.summary .woocommerce-product-details__short-description');
  },
  applyCssFixes: function() {},
  onMobileView: function() {
    let form = this.getAddToCartElement();
    let description = this.getDescriptionElement();

    // Detach form from page    
    try {
      console.log('moving form');
      // jQuery(form).detach().insertBefore(description);
      let detached = jQuery(form).detach();
      jQuery(detached).insertBefore(description);
    } catch (e) {
      console.log(e);
    }
  },
  onDesktopView: function() {
    let form = this.getAddToCartElement();
    let description = this.getDescriptionElement();

    // Detach form from page        
    // jQuery(form).remove();

    // Insert above description
    // jQuery(form).detach().insertAfter(description);
  },
  onResize: function() {
    let currentWidth = jQuery(window).width();

    // Desktop screen size
    if (this.lastKnownSize <= this.mobileBreakpoint && currentWidth > this.mobileBreakpoint) {
      this.onDesktopView();
    }
    // Mobile view
    else if (this.lastKnownSize > this.mobileBreakpoint && currentWidth <= this.mobileBreakpoint) {
      this.onMobileView();
    }

    this.lastKnownSize = currentWidth;
  }
};

jQuery(document).ready(function() {
  productPage.init();
});