Skip to content

Instantly share code, notes, and snippets.

@gnarf
Created June 1, 2011 23:53
Show Gist options
  • Save gnarf/1003630 to your computer and use it in GitHub Desktop.
Save gnarf/1003630 to your computer and use it in GitHub Desktop.
$.fn.newContent
// $.fn.newContent behaves kinda like .live(), it will act on elements that match the
// selector now, or in the future... It automatically runs on any elements immediately
// matched, and also runs once on document ready. You then call .newContent() on any
// freshly created content to trigger searching it
// It will call the given callback function in the context of a
// jQuery set that matches the selector...
$("li.test").newContent(function() {
this.css("color", "red");
});
// calling .newContent() without an argument triggers searching the matched elements
// for the selectors bound via newContent() -- You can call .newContent() from your AJAX
// callback, etc to search that content for things matching your selectors.
var html = $("ul").html();
$(html).newContent().appendTo("ul");
// another usage exampe:
$(".make-button").newContent(function() {
this.each(function() {
var el = $(this);
el.button( el.data('button') );
});
});
// lets pretend this is an ajax response
var ajaxResponse = "<a href='#' class='make-button' data-button='{}'>";
// note, we call .newContent() on the children() because #targetDiv was already
// in the dom (and therefore isn't "new" content)
$("#targetDiv").html(ajaxResponse).children().newContent();
/*
* jQuery.newContent.js - Functions to trigger when new content is added
*
* Copyright (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*/
(function( $, undefined ) {
var contentHooks = [];
$.fn.newContent = function( callback ) {
var content = this;
// $( responseHtml ).appendTo( target ).newContent();
// ----
// No Argument:
if ( !callback ) {
// Loop through all previously bound newContent hooks
$.each( contentHooks, function( i, hook ) {
var selector = hook.selector,
callback = hook.callback,
// When the selector is "false" - call on each "newContent"
elems = selector === false ? content :
// otherwise - look for the selector within what was passed
content.find( selector ).add( content.filter(selector) );
if ( elems.length ) {
callback.call( elems );
}
});
// return this for chain...
return content;
}
// $.fn.newContent( callback )
// -- or --
// $( selector ).newContent( callback )
// binds a callback that gets called whenever newContent() is called
// If called on the prototype store "false" - meaning no selector
// Otherwise, get the selector from the current jQuery object.
contentHooks.push({
selector: content === $.fn ? false : content.selector,
callback: callback
});
// call this function immediately on the matched elements
if ( content.length ) {
callback.call( content );
}
return content;
};
})( jQuery );
/*
* jQuery.newContent.js - Functions to trigger when new content is added
*
* Copyright (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*/
(function(a,b){var c=[];a.fn.newContent=function(b){var d=this;if(!b){a.each(c,function(a,b){var c=b.selector,e=b.callback,f=c===!1?d:d.find(c).add(d.filter(c));f.length&&e.call(f)});return d}c.push({selector:d===a.fn?!1:d.selector,callback:b}),d.length&&b.call(d);return d}})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment