Created
May 18, 2011 12:54
-
-
Save cowboy/978520 to your computer and use it in GitHub Desktop.
jQuery Detach+: Improve .detach to allow optional reattaching!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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