{"id":353,"date":"2009-02-06T02:07:07","date_gmt":"2009-02-06T08:07:07","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=353"},"modified":"2009-02-13T11:24:13","modified_gmt":"2009-02-13T17:24:13","slug":"later-binding-jquery-plugin-methods","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/02\/06\/later-binding-jquery-plugin-methods\/","title":{"rendered":"$.later<\/code>: binding jQuery plugin methods"},"content":{"rendered":"\t

I don't like writing function(){$(this).doStuff()}<\/code> for callbacks and\r\n\twanted some more elegant way of binding objects to functions. I could always use something like Prototype's bind<\/code><\/a>, but I don't want to modify built-in types\r\n\t(because John Resig says not to) and I generally just want to bind plugins to jQuery objects, so it ought to be a\r\n\tplugin. Inspired by Ariel Flesler's jquery.sugar<\/a> and John Resig's ultrachaining<\/a>.<\/p>\r\n\t

So we have $.later<\/code> and $.fn.later<\/code>. $.later()<\/code> returns a chainable function that is bound at\r\n\tcall time to this<\/code>.\r\n\t$.later().css('color', 'red').append('<span>more<\/span>')<\/code> is the same as\r\n\tfunction() { $(this).css('color', 'red').append('<span>more<\/span>') }<\/code>.\r\n\t$(selector, context).later()<\/code> is similar, but binds to $(selector, context)<\/code> at call time: \r\n\t$('p').later().css('color', 'red').append('<span>more<\/span>')<\/code> is the same as\r\n\tfunction() { $('p').css('color', 'red').append('<span>more<\/span>') }<\/code><\/p>\r\n\t

Download the code<\/a>.<\/p>\r\n\t\r\n\t

Examples<\/h4>\r\n\t
\r\n\t$('#example1').click($.later().toggleClass('bold'));\r\n\t<\/code><\/pre>\r\n\t
\r\n\t<div id="example1">\r\n\t\tExample 1: \r\n\t\t<span>Click Me<\/span>\r\n\t<\/div>\r\n\t<\/code><\/pre>\r\n\t
\r\n\t$('#example2').click($('.example:last').later().animate({fontSize: '+=2'}, $('.example:first').later().fadeOut().fadeIn()));\r\n\t<\/code><\/pre>\r\n\t
\r\n\t<div id="example2">\r\n\t\tExample 2: \r\n\t\t<span class=\"example\">Click Me<\/span> | \r\n\t\t<span class=\"example\">Watch Me<\/span>\r\n\t<\/div>\r\n\t<\/code><\/pre>\r\n\t