What's the meaning of "data-api" in Twitter Bootstrap's Tab plugin

Question

There is a piece of code as

/* TAB DATA-API
 * ============ */

 $(function () {
   $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
     e.preventDefault()
     $(this).tab('show')
   })
 })

in the file Bootstrap--tab I don't understand the 'click.tab.data-api' and '[data-toggle="tab"], [data-toggle="pill"]'

Who could explain it for me? THANKS~~

Answer 1

the click.tab.data-api is a click event with Namespace 'tab.data-api'. you can look at the document here (event and namespace section).

If I remember correctly, the data-* is a new custom data attribute in Html5 standard, it comes handy when you want to define you own attributes or data. check out John's post explaining data attribute.

Answer 2

Bootstrap developers tag their click events to avoid touching yours.

It is actually a normal click event handler, but with an added jQuery namespace which is useful for unbinding.

$('body').on('click', handler1) is the same as $('body').on('click.something', handler2) both will bind and handle click events. You usually bind one handler on event, but sometimes you need more to react at the same time.

Later if you want to unbind you could use $('body').off('click') to remove both handlers, or $('body').off('.something') to remove only the second handler.

http://api.jquery.com/on/#event-names