In jQuery 1.7.2 what is the difference between on("click") and on("click.randomText")?

Question

I inherited an application which uses jQuery 1.7.2.

Throughout the application we have code like the below:

$('#quotation').off("click").on("click", function(){
     // do something here...
}

Now, I do understand the above no problem. However, occasionaly in our code I come across something like this:

$('#continue').off("click.products").on("click.products", function(){
     // do something here...
}

Throughout the application I find click.products or click.orders. It seems what ever following the . can be completly random text.

What is the difference between click and click.products?

Answer 1

This code uses custom namespace event defined by them self or by a plugin.

An event name can be qualified by event namespaces that simplify removing or triggering the event. For example, "click.myPlugin.simple" defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with .off("click.myPlugin") or .off("click.simple") without disturbing other click handlers attached to the elements. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match. Namespaces beginning with an underscore are reserved for jQuery's use.

on docs

Live DEMO:

$('#a').on('click.bar', function() {
    console.log('bar');
});

$('#a').on('click.foo', function() {
    console.log('foo');
});


$('#b').click(function() {
    $('#a').trigger('click.foo');
});​

Now when clicking on #a both of the clicks handlers (foo and bar) will raise,
But when clicking on #b only the foo will raise.