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

また、tabsselect の代わりに tabsactivate も試しました。クラスとIDで選択してみました。横断を選んでDOMを歩いてみました。最終的には、タブにバインドする関数を使用して、請求合計に 3% の手数料を追加します。また、この関数で、指定された入力要素の JSON キー、属性 "required" を "true" に変更します。これは、この機能をバインドするために非常に重要です...助けてくれて本当に感謝しています。

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

これが私のために働いたものです。アランのソリューションは部分的に機能しました（アランに感謝します）。

ステップ 1: タブへのバインドは、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);

ステップ 2: クラスを手動で/問題を起こして追加します。ページの読み込み時にタブが選択されているタブに対してのみ、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 に答える