现象分析：
我们经常使用以下代码添加tab选项卡：
- $('#tt').tabs('add', {
- title: 'tab4',
- closable: true,
- cache: true,
- tools: [{
- iconCls: 'icon-mini-refresh',
- handler: function(e) {
- alert(e)//弹出undefined
- }
- }]
- });
在handler中，我们试图打印e对象，结果却是undefined，原因很简单，tabs组件的源码在绑定事件的时候，用的是call方式，而且确实是没有传参的call。
修复方式：
要想对此做修复也不难，重新绑定一下小工具的事件即可，因此，我写了一个扩展，调用这个扩展的方法后即可将事件对象传到handler里面：
- /**
- * @author {CaoGuangHui}
- */
- $.extend($.fn.tabs.methods, {
- /**
- * tabs组件每个tab panel对应的小工具条绑定的事件没有传递事件参数
- * 本函数修正这个问题
- * @param {[type]} jq [description]
- */
- addEventParam: function(jq) {
- return jq.each(function() {
- var that = this;
- var headers = $(this).find('>div.tabs-header>div.tabs-wrap>ul.tabs>li');
- headers.each(function(i) {
- var tools = $(that).tabs('getTab', i).panel('options').tools;
- if (typeof tools != "string") {
- $(this).find('>span.tabs-p-tool a').each(function(j) {
- $(this).unbind('click').bind("click", {
- handler: tools[j].handler
- }, function(e) {
- if ($(this).parents("li").hasClass("tabs-disabled")) {
- return;
- }
- e.data.handler.call(this, e);
- });
- });
- }
- })
- });
- }
- });
使用也很简单:
- $('#tt').tabs('addEventParam');
