重新附加jQuery detach();

Question

我已经将一个 div 分离，想要在点击按钮时重新附加它。

这是代码：

$('#wrapper').detach();

$("#open_menu").click(function(){
    ATTACH HERE !!!
});

非常感谢您的帮助。

- Jacques Goudreau

---

直接使用 append() 添加它怎么样？ - adeneo

我有一个演示如何做到这一点的网址：https://jsfiddle.net/pwdst/rf3nrnzo/ - 我会在明天晚上写一个完整的答案来解释它和各种方法，届时我应该会有更多时间。 - pwdst

可能是在JQuery中恢复多个分离元素的重复问题。 - LCJ

Answer 1

var el = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append(el);
});

- Asad Saeeduddin

Answer 2

我需要一个解决方案，即使在目标元素后面有其他元素要分离和重新连接也能正常工作。这意味着append可能不可靠，因为它会将该元素移回其父级的末尾。我不得不使用占位符，这可能不是最优雅的解决方案，但我没有找到其他方法。

var $wrapper = $('#wrapper')
    , $placeholder = $('<span style="display: none;" />')
        .insertAfter( $wrapper )
    ;
$wrapper.detach();

$("#open_menu").on('click',function(){
    $wrapper.insertBefore( $placeholder );
    $placeholder.remove();
});

为了使其更易于复用，最好将其包装在一个 jQuery 插件中：

(function($){

    $.fn.detachTemp = function() {
        this.data('dt_placeholder',$('<span style="display: none;" />')
            .insertAfter( this ));
        return this.detach();
    }

    $.fn.reattach = function() {
        if(this.data('dt_placeholder')){
            this.insertBefore( this.data('dt_placeholder') );
            this.data('dt_placeholder').remove();
            this.removeData('dt_placeholder');
        }
        else if(window.console && console.error)
        console.error("Unable to reattach this element because its placeholder is not available.");
        return this;
    }

})(jQuery);

用法：

var $wrapper = $('#wrapper').detachTemp();
$("#open_menu").on('click',function(){
    $wrapper.reattach();
});

- Femi

---

在 console.error(..) 中执行附加操作以保持一致的行宽是不必要的！ - Joe Shanahan

Answer 3

如果您希望将元素附加在开头位置，您可以使用.prepend()方法。

否则，您可以使用.append()方法进行附加。

在您的情况下，代码应为：

var $wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
    //ATTACH HERE !!!
    $(this).prepend($wrapper); // or $(this).append($wrapper);
});

我希望这能对你有所帮助 :)

- Mensur Grišević

Answer 4

我认为这主要是记录将被卸载的元素的索引，然后在确定重新附加该元素的位置时使用该索引。请看下面的“repl”：https://repl.it/@dexygen/re-attach以及以下代码。 setTimeout仅是为了让您在将元素从页面中分离之前查看它，并且已经重命名了一些元素。我想知道是否可以使用siblings替代parent().children()，但担心在分离的兄弟元素是唯一的兄弟元素时会发生什么情况，我们仍需要参考父元素，以便在index === 0时进行前置插入。

setTimeout(function() {
    var bar = $('#bar');
    var parent = bar.parent();
    var index = parent.children().index(bar);

    bar.detach();

    $("#re-attach").one('click', function() {
        if (index === 0) {
            parent.prepend(bar);  
        }
        else {
            parent.children().eq(index-1).after(bar);
        }
    });
}, 5000);

- Dexygen

---

这正是我遇到的问题。谢谢！ - Benjamin Goodacre

Answer 5

var $wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append($wrapper[0])
});

- ErvTheDev

Answer 6

$(function(){
 var detached = $('#element_to_detach').detach();
 // Here We store the detach element to the new variable named detached
 $('.element_after_which_you_need_to_attach').after(detached);
});

- Saif-ur- Rehman

Answer 7

你可以在将元素分配给变量后，使用prepend()方法将其插入到文档中，例如：

var det_elem = $('#wrapper').detach();
$("#open_menu").click(function(){
    $(this).prepend(det_elem);
});

prepend() 将会在元素的开头添加。

- Samwel Walter

Answer 8

jQuery没有提供attach方法。请注意，detach相当于从Dom永久删除项目。如果您认为可能需要删除并稍后重新引入元素，请考虑以下选项：

1. 使用toggle方法。隐藏和显示页面上的元素。
2. 如果您必须绝对从Dom中删除该项，请考虑使用jQuery clone方法，首先复制指定元素的副本，然后可以将元素副本重新引入Dom。

以上不是实现此操作的唯一两种方法，但它们简单易行，可能不需要太多代码更改。

- PuReWebDev

---

这个答案在事实上是错误的。如果你阅读文档（https://api.jquery.com/detach/），你会发现里面写着：“.detach() 方法与 .remove() 方法相同，不同之处在于 .detach() 会保留与已删除元素相关联的所有 jQuery 数据。当需要稍后重新插入已删除元素到DOM中时，此方法非常有用。” 强调为本人所加。例如，在向一个元素添加许多子元素时，使用 detach 可以避免布局抖动问题。 - pwdst

刚刚添加了一个踩的操作，以防止其他人受到错误信息的影响。感谢你的评论，让我有所思考。 :) - Benson