What does click.modal.data-api mean as an event name?

Question

I read through JavaScript Bootstraps and noticed the following code:

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { //do something }); 

Can someone explain to me why this is "click.modal.data-api" . What does the point after the event do? I may be blind, but I can not find the documentation that says this.

Answer 1

This event with names and the documentation ^[docs] describes it pretty well:

An event name can be assigned to event namespaces that make it easy to delete or fire an event. For example, "click.myPlugin.simple" defines both myPlugin and simple namespaces for this particular click event. The click event handler attached through this line can be removed using .off("click.myPlugin") or .off("click.simple") without breaking other click handlers attached to the elements. Namespaces are similar to CSS classes because they are not hierarchical; only one name is required. Namespaces starting with an underscore are reserved for jQuery.

Answer 2

It is simply an event namespace. Take a look at http://api.jquery.com/event.namespace/

Answer 3

I’m not quite sure about this, but I think it’s a kind of “personal event triggering”. I'll explain it better: you can define your own event listeners and fire them whenever you want. For example, you can define the myEvent event and fire it by simply executing .trigger('myEvent') . Here is a small snippet:

 $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { //do something }); 

This is an event handler declaration that you can only call in this way:

 $(document).trigger('click.modal.data-api'); 

Learn more about the .trigger() , .bind() and .on()