重新附加jQuery detach();

Question

我已经分离了div并且想要在单击按钮时重新附加它.

这是代码:

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

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

任何帮助将不胜感激.

Answer 1

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

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

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();
});

Answer 3

如果您希望项目附加在元素的开头，则可以使用.prepend（）

否则，您可以使用append（）将其附加。

在您的情况下，它将是：

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

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

希望对您有所帮助:)