Question

I just ran across some jQuery that looks like this:

$('.add-row').live('click.add', function() { 
    // do something
}

This appears to be binding to the ‘click.add’ event. I use custom events myself and think they’re awesome, but doing git grep on our code base doesn’t reveal any place where a custom event called click.add is triggered, and in any case, this behavior is triggered by a normal click. Nor do I see an .add class anywhere in the HTML.

I don’t think you can have classes on Javascript events. Any idea what this odd bit of syntax is?

Answer 1

This is a featured called namespaced events. In this example, add is a namespace. It is effectively a class for events, so that you can categorise them and handle/trigger them accordingly. For instance, you might write a plugin and give every event handler a namespace of myPlugin so that you can unbind them without removing the user’s other event handlers:

$('a').bind('click.myPlugin', function(){ /*...*/ }); // bind with the myPlugin namespace
$('a').bind('click'), function() { /* ... */ }); // bind without a namespace
$('a').unbind('.myPlugin'); // only removes the first function

This works for trigger as well.