jQuery event binding with .on()

Question

Can someone explain to me why this works:

parentBox.on('click', '.close', function() {
   parentBox.fadeOut();                  
   return false; 
 });

But this does not:

var closeBox = $('.close');
parentBox.on('click', closeBox, function() {
   parentBox.fadeOut();
   return false; 
});

When caching '.close' into a var, no matter where I click in the parent element, it fades out as if the event handler was attached to parentBox rather than '.close'.

Answer 1

This not works because

.on( events [, selector] [, data], handler(eventObject) )

second parameter is always selector (string type), if you need to bind to specific objects use

 closeBox.bind('click',function(){/* code here */})