Question

有一段代码

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

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

文件Bootstrap--tab中的

我不理解'click.tab.data-api'和'[data-toggle="tab"], [data-toggle="pill"]'

谁能为我解释一下？致谢~~

Answer 1

click.tab.data-api是一个带有命名空间'tab.data-api'的点击事件。您可以查看文档here（事件和命名空间部分）。

如果我没记错的话，data- *是Html5标准中的一个新的自定义数据属性，当你想要定义自己的属性或数据时它很方便。查看解释数据属性的John's post。

Answer 2

Bootstrap开发人员标记他们的点击事件以避免触碰你的。

它实际上是一个普通的 click 事件处理程序，但添加了一个jQuery命名空间，这对于解除绑定非常有用。

$('body').on('click', handler1)与$('body').on('click.something', handler2)相同两者都将绑定并处理点击事件。你通常在事件上绑定一个处理程序，但有时你需要更多的同时做出反应。

稍后，如果您要取消绑定，可以使用$('body').off('click')删除这两个处理程序，或$('body').off('.something')仅删除第二个处理程序。

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

Twitter Bootstrap的Tab插件中“data-api”的含义是什么？

2 个答案: