2

我是初学者/中级开发人员/程序员。我有我在 jQuery 中构建的 jQuery-UI-Tabs，就像这样（它们显示出来并且运行良好）：

   var paymentTabs = $('<div id="paytabs">');
...
var paymentTabList = $('<ul>');

paymentTabs.append(paymentTabList);
if($.inArray('check',options.methods) != -1){
paymentTabList.append('<li><a href="#pay-by-check">Pay with an E-Check</a></li>');
paymentTabs.append(payByCheck);
}
if($.inArray('card',options.methods) != -1){
paymentTabList.append('<li><a href="#pay-by-card">Pay with a Credit/Debit Card</a></li>');
paymentTabs.append(payByCard);
}
if($.inArray('code',options.methods) != -1){
paymentTabList.append('<li><a href="#pay-by-code">Business Office Use Only</a></li>');
paymentTabs.append(payByCode);
}

paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});

paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});

绑定到它们不起作用：

$( "#paytabs" ).on( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});

这也不是：

$( "#paytabs" ).bind( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});

我也尝试过 tabsactivate 而不是 tabsselect。我尝试按班级和 ID 进行选择。我尝试选择横向并遍历 DOM。最后，我将使用绑定到选项卡的功能，在账单总额中增加 3% 的费用。我还将使此函数将 JSON 键、属性“必需”更改为指定输入元素的“真”。这对我绑定此功能至关重要...我非常感谢您的帮助。

4

2 回答 2

3

看这里：http ://api.jqueryui.com/tabs/#event-activate

绑定到选项卡“激活”事件。因此，当单击选项卡时，将触发激活功能。

像这样：

$("#paytabs").tabs({
   activate: function( event, ui ){
    /* do something here */
   }
 });

或者

$("#paytabs").on( "tabsactivate", function( event, ui ){
    /* do something here */
});
于 2013-05-20T05:38:04.420 回答
1

这对我有用。Aran 的解决方案部分有效（谢谢 Aran）。

第一步：绑定到选项卡激活如 Aran 所述，但直接在元素上，因为它被实例化。如果您这样做，则不需要元素选择器。

billing_div.append('<h3>Payment Information</h3>');
  var paymentTabs = $('<div id="paytabs">').tabs({select: function( event, ui ) {alert("tab has been clicked.");}});
  billing_div.append(paymentTabs);

第二步：手动/有问题地添加类。请记住仅在页面加载时选择选项卡的选项卡包含 ui-tabs-selected。

var paymentTabList = $('<ul>').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
      paymentTabs.append(paymentTabList);
      if($.inArray('check',options.methods) != -1){
        paymentTabList.append('<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#pay-by-check">Pay with an E-Check</a></li>');
        paymentTabs.append(payByCheck);
      }
      if($.inArray('card',options.methods) != -1){
        paymentTabList.append('<li class="ui-state-default ui-corner-top"><a href="#pay-by-card">Pay with a Credit/Debit Card</a></li>');
        paymentTabs.append(payByCard);
      }
      if($.inArray('code',options.methods) != -1){
        paymentTabList.append('<li class="ui-state-default ui-corner-top"><a href="#pay-by-code">Business Office Use Only</a></li>');
        paymentTabs.append(payByCode);
      }
于 2013-05-20T20:35:53.450 回答