Wie jede Tabellenzeile indipendently auf keyup

<tbody id="dailysale_tbody"> 
<tr class="items"> 
    <td><select id="items_select" name="dailysale[luitem_id]"><option value=""></option></select></td> 
    <td><select id="brands_select" name="dailysale[lubrand_id]"><option value=""></option></select></td> 
    <td><select id="models_select" name="dailysale[lumodel_id]"><option value=""></option></select></td> 
    <td><input class="texts" id="dailysale_qty" name="dailysale[qty]" type="text" /></td> 
    <td><input class="texts" id="dailysale_price" name="dailysale[price]" type="text" /></td> 
    <td><input class="texts" id="dailysale_total" name="dailysale[total]" type="text" /></td> 
    <td><input type="checkbox" class="delete_row"></td> 
</tr>

Wie jede Tabellenzeile indipendently auf keyup

$(function() { 
$('#dailysale_qty, #dailysale_price').keyup(function() { 
     var last_item = $('.items').find('#dailysale_qty'); 
     var qty = last_row.find('#dailysale_qty').val(); 
     var price = last_row.find('#dailysale_price').val(); 
     var sub_total = last_row.find('#dailysale_total'); 
     var s_total = qty * price; 

      if (isNaN(s_total)) { 
       sub_total.val('0'); 
       } 
      else 
      sub_total.val(s_total); 
    }); 
});

Ich bin in der Lage berechnen Berechnungen auf dieser Zeile durchzuführen. Wenn ich jedoch dynamisch Zeilen mit jquery hinzufüge, funktionieren die Berechnungen für die anderen Zeilen nicht.

Wenn die Berechnungsfunktion eine Schaltfläche onclick binden, funktioniert alles gut. Aber nicht auf Eingabe-Taste wie erforderlich. Ich möchte Berechnungen auf der neuen hinzugefügten Reihe mit onkeyup auf qty und price Eingabefeldern durchführen.

Hinweis: Beim Klonen werden die id s aus der aktuellen Zeile entfernt und der neuen Zeile als Referenz zugewiesen.

Quelle

2017-05-12 JohnMilo

Ihr keyup Event-Handler wird nicht automatisch dynamisch zugewiesenen Zeilen zugewiesen, siehe [this] (http://stackoverflow.com/questions/203198/event-binding-on-dynamically- created-elements). Auch sollten Sie Klassen anstelle von IDs verwenden, weil ... was @Gerardo gerade gepostet hat – James

Sie müssen den Handler manuell hinzufügen, nachdem Sie die neue Zeile eingefügt haben und Sie sollten nicht die gleiche ID auf mehreren Elementen haben. – Gerardo

Haben Sie versucht, etwas wie $ ('. Elemente'). On ('keyup ändern', 'td', function() {und hier die Ausführung}? –

Sie registrieren die keyup-Funktion wahrscheinlich nicht, wenn Sie eine neue Zeile hinzufügen. Sie tun sollten:

$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup(function(...

Jedes Mal, wenn Sie neue Zeile hinzugefügt wird.

Quelle

2017-05-12 19:23:23 Nosyara

Klicken Sie unten auf den Code, der neue Zeilen hinzufügt Wenn ich Ihre Zeile anhefte, funktionieren die Funktionen nicht mehr – JohnMilo

Versuchen Sie: $ ('# dayalsale_qty, #dailysale_price ') .off (' keyup '). keyup (function (...) – Nosyara

Auch das löscht den Mechanismus zum Hinzufügen von Zeilen. Beachten Sie, dass $ (' # newitembtn ') verwendet wird. Klicken Sie auf (function(), um eine neue Zeile hinzuzufügen). Ich habe versucht, beide zu verwenden oder meine Linie zu entfernen und zu ersetzen, aber es funktioniert auch nicht. Bitte lesen Sie den vollständigen Code unten. – JohnMilo

@Nosyara Die vorgeschlagene Codezeile funktioniert nicht. Hier erfahren Sie, wie Sie neue Zeilen hinzufügen. Die kommentierte Zeile ist das, was Sie vorgeschlagen haben.

$(function(){ 
$('#newitembtn').click(function(){ 
    //$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup(function() { 
    var last_row = $('#dailysale_tbody').find('tr:last'); 
    var newrow = last_row.clone(); 

    last_row.find('#items_select').removeAttr('id'); 
    last_row.find('#brands_select').removeAttr('id'); 
    last_row.find('#models_select').removeAttr('id'); 
    last_row.find('#dailysale_qty').removeAttr('id'); 
    last_row.find('#dailysale_price').removeAttr('id'); 
    last_row.find('#dailysale_total').removeAttr('id'); 

    newrow.find('#items_select').val(''); 
    newrow.find('#brands_select').val(''); 
    newrow.find('#models_select').val(''); 
    newrow.find('#dailysale_qty').val(''); 
    newrow.find('#dailysale_price').val(''); 
    newrow.find('#dailysale_total').val(''); 


    last_row.after(newrow); 

    }); 

});

});

Quelle

2017-05-12 20:05:46 JohnMilo

Wie jede Tabellenzeile indipendently auf keyup

Antwort

Verwandte Themen