Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery Detach+: Improve .detach to allow optional reattaching!
/*!
* jQuery Detach+ - v0.1pre - 5/18/2011
* http://benalman.com/
*
* Copyright (c) 2011 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($){
// https://gist.github.com/938767
var detach = $.detach = function(node, async, fn) {
var parent = node.parentNode;
var next = node.nextSibling;
// No parent node? Abort!
if ( !parent ) { return; }
// Detach node from DOM.
parent.removeChild(node);
// Handle case where optional `async` argument is omitted.
if ( typeof async != 'boolean' ) {
fn = async;
async = false;
}
// Note that if a function wasn't passed, the node won't be re-attached!
if ( fn && async ) {
// If async == true, reattach must be called manually.
fn.call(node, reattach);
} else if ( fn ) {
// If async != true, reattach will happen automatically.
fn.call(node);
reattach();
}
// Re-attach node to DOM.
function reattach() {
parent.insertBefore(node, next);
}
};
// Override the default .detach method to offer the new functionality.
$.fn.detach = function(async, fn) {
return this.each(function() {
// Call detach for each element in the collection.
detach(this, async, fn);
});
};
})(jQuery);
// The default jQuery .detach behavior still works.
var elem = $('#huge-ass-table').detach();
elem.doCrazyExpensiveStuff();
elem.appendTo('.wherever-it-was-before');
// But this will auto-reattach as soon as the callback is done.
$('#huge-ass-table').detach(function() {
$(this).doCrazyExpensiveStuff();
});
// And this will auto-reattach whenever `reattach` is called (asynchronous).
$('#huge-ass-table').detach(true, function(reattach) {
$(this).doCrazyExpensiveStuff();
setTimeout(reattach, 1000);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.