Question

我是初学者/中级开发人员/程序员。我有jQuery-UI-Tabs，我正在jQuery中构建它们（它们显示并且运行正常）：

   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.");
});

我也尝试过tabactivate而不是tabsselect。我尝试按类和id选择。我尝试选择横向和走DOM。最后，我将使用我绑定到选项卡的功能，为计费总额增加3％的费用。我还将使此函数更改JSON键，将“required”属性设置为“true”以用于指定的输入元素。这对我来说至关重要。我非常感谢你的帮助。

Answer 1

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

绑定到标签'activate'事件。因此，当单击选项卡时，将触发activate函数。

喜欢这个：

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

或

$("#paytabs").on( "tabsactivate", function( event, ui ){
    /* do something here */
});

Answer 2

这对我有用。 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。

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);
      }

如何绑定到jQuery UI选项卡事件单击/选择/活动？

2 个答案: