Ajax automatische Füllung auf dynamische Eingabefelder

Question

Ich habe ein Rechnungsformular und Benutzer können so viele Teile hinzufügen, wie sie wollen. Wenn der Benutzer die Teilenummer eingibt, habe ich ein Ajax-Skript, das die Beschreibung und den Preis automatisch ausfüllt.

Das Skript arbeitet für die ersten Anfangseingabefelder, aber wenn ich hinzufügen, mehrere Eingabefelder, das Skript funktioniert nicht auf den neuen Eingabefelder:

****** Bitte überprüfen Sie meine Updates ***** * - immer noch nicht

<table id="partstable" class="table order-list2 table-hover table-condensed table-bordered" > 
<thead> 
    <tr> 
    <th width="30%">Part #</th> 
    <th width="30%">Part Desc.</th> 
    <th size="4">Part Price</th> 
    <th>Part Qty</th> 
    <th>Total</th> 
    <th></th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td><input type="text" class="input-small classpp" name="partnumber" id="partnumber0"></td> 
    <td><input type="text" class="input-small classd" name="partdescription1" id="partdescription0"></td> 
    <td><input type="text" class="input-small classp" name="partprice" id="partprice0" size="4" onblur="doCalcoriginal(); calculate(); "></td> 
    <td><input type="text" class="input-small" name="partquantity" id="partquantity0" size="4" onblur="doCalcoriginal(); calculate(); showMessage(); "></td> 
    <input type="hidden" readonly class="partdb" size="4" name="partdb" id="partdb0" style="background-color: transparent;border: 0px solid;" > 
    <td><span class="amount" ></span></td> 
    <td><a class="deleteRow2"></a></td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
    <td colspan="5" style="text-align: left;"> 
     <input type="button" id="addrow2" value="Add" class="btn btn-primary" /> 
    </td> 
    </tr> 
</tfoot> 
</table> 

ajax

<script type="text/javascript"> 
var count 0; 
$("#partstable").on('blur keyup', "#partnumber"+count , function() { 


searchString=$(this).val(); 


    var data = 'partnumber='+searchString; 


    if(searchString) { 
     // ajax call 

     $.ajax({ 
      type: "POST", 
      url: "partpricequery.php", 
      data: data, 

      success: function(html){ 

    result = String(html).split("|"), 


var counter=0; 
loop{ 
$("#partdescription"+counter).val(result[0]); 
$("#partprice"+counter).val(result[1]); 
counter++; 
} 



showlabel(); 

     } 
     });  
    } 
    return false; 
    }); 

</script> 

hinzufügen mehr Taste

<script> 
$(document).ready(function() { 
var counter = 0; 

$("#addrow2").on("click", function() { 
    doCalc(); 
    doCalcoriginal(); 
    calculate(); 
    grandsum(); 


    counter = $('#partstable tr').length - 2; 

    var newRow = $("<tr>"); 
    var cols = ""; 
    cols += '<td><input text="text" class="input-small" name="partnumber" id="partnumber'+counter+'" /></td>'; 
    cols += '<td><input text="text" class="input-small" name="partdescription" id="partdescription'+counter+'"/></td>'; 
    cols += '<td><input class="input-small" size="4" type="text" name="partprice" id="partprice'+counter+'" onblur="doCalc(); doCalcoriginal(); calculate(); calculate2();"/></td>'; 
    cols += '<td><input class="input-small" size="4" type="text" name="partquantity" id="partquantity"'+counter+'" onblur="doCalc(); doCalcoriginal(); calculate(); calculate2();"/></td>'; 
    cols += '<input type="hidden" readonly class="parttotal" size="4" name="partdb[]" style="background-color: transparent;border: 0px solid;" >'; 
    cols += '<td><span class="amount"></span></td>'; 

    cols += '<td><input type="button" class="ibtnDel btn btn-danger" value="X"></td>'; 

    newRow.append(cols); 
    if (counter == 100) $('#addrow2').attr('disabled', true).prop('value', "You've reached the limit"); 
    $("table.order-list2").append(newRow); 
    counter++; 
}); 

$("table.order-list2").on("click", ".ibtnDel", function (event) { 
    $(this).closest("tr").remove(); 
    doCalc(); 
    doCalcoriginal(); 
    calculate(); 
    grandsum(); 


    counter -= 1 
    $('#addrow2').attr('disabled', false).prop('value', "Add Row"); 
}); 
}); 


</script> 

Answer 1

Wenn Sie dies tun:

$("#partnumber").on('blur keyup' , function() { 
    ................. 
}); 

Die Veranstaltung richtet sich an die Elemente binded, dass die .on() Verfahren zum Beispiel zu dem Zeitpunkt existieren genannt wird Dokumentenladung. Sie müssen event delegation für dynamisch erstellte Elemente verwenden.

So ein Elternteil Ziel sagen, dass die aktuelle Tabelle, die die Eingaben und verwenden Sie einen delegierten Ereignis hält wie:

$("table").on('blur keyup', "#partnumber" , function() { 
    ................. 
}); 

Dies wird nun für Veranstaltungen auf dem Tisch des Nachkommen hören von für Veranstaltungen suchen, der Blase an den Tisch anstatt direkt an diese Elemente anzuhängen.

Answer 2

Sie verwenden ID. Das ist das Problem. Bei Verwendung von "id" funktioniert die erste nur. Verwenden Sie die Klasse immer, wenn mehrere Elemente vorhanden sind.

entfernen id = „Teilenummer“ und die Verwendung class = „Artikelnummer“