Wie kann ich binden jQuery UI tab-event klicken/auswählen/aktiv?

Ich bin ein Anfänger/Mittelstufe-Entwickler/Programmierer. Ich habe jQuery-UI-Tabs, die ich Baue in jQuery so (und Funktion in Ordnung):

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

Bindung zu Ihnen nicht funktioniert:

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

Weder tut:

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

Ich habe auch versucht tabsactivate statt tabsselect. Ich habe versucht, die Auswahl, die durch die Klasse und id. Ich habe versucht die Auswahl von quer-und Durchlaufen des DOM. Schließlich werde ich die Funktion, dass ich binden Sie auf die Registerkarte hinzufügen eine 3% Gebühr auf der Abrechnung insgesamt. Werde ich auch machen mit dieser Funktion ändern Sie die JSON-Schlüssel-Attribut "required" auf "true" für eine bestimmte input-element. Dies ist wichtig für mich, um diese Funktion gebunden... ich bin wirklich dankbar für die Hilfe.

InformationsquelleAutor user2400458 | 2013-05-20
  1. 3

    Schau mal hier: http://api.jqueryui.com/tabs/#event-activate

    Binden Sie auf die Registerkarte "aktivieren" - Ereignis. Also wenn eine Registerkarte geklickt haben, aktivieren Sie die Funktion ausgelöst wird.

    Wie Diese: 

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

    oder

    $("#paytabs").on( "tabsactivate", function( event, ui ){
    /* do something here */
});
    • Danke für Eure Antworten. Weder syntax für mich gearbeitet. Ich bin mit jquery-ui-1.8.16.custom.min.js kann ich diese Datei Bearbeiten und direkt? würde das funktionieren?
    • Bindung an die Zeit von instanciating feuert das Ereignis selbst, sondern tötet die css. var paymentTabs = $('<div id="paytabs">').tabs({select: function( event, ui ) {alert("tab has been clicked.");}});;
    • Google-Element-Inspektor zeigt, dass das DOM aktualisiert wird mit dem div-Klasse" '<div class="ui-tabs ui-widget ui-widget-content ui-corner-all"><ul><li class=""><a href="# "pay-by-check">Zahlen mit einem E-Check</a></li><li class=""><a href="#pay-per-Karte">Bezahlen Sie mit einer Kredit - /Debit-Karte</a></li></ul>'
    • Und die li sind gerendert, mit eine leere Klasse.
    InformationsquelleAutor aran
  2. 1

    Hier ist was für mich gearbeitet. Aran Lösung gearbeitet, die in Teil (danke Aran).

    Schritt Eins:
    Binden, um tabs zu aktivieren, wie Aran beschrieben, sondern direkt auf das element, wie es instanziert ist. Es gibt keine Notwendigkeit für ein element-Selektor, wenn Sie dies tun.

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

    Schritt Zwei:
    Fügen Sie die Klassen manuell/problematisch. denken Sie daran, ui-tabs-selected nur für die Registerkarte, die Registerkarte ausgewählt ist, auf die Seite laden.

    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);
      }
    InformationsquelleAutor user2400458
Schreibe einen Kommentar