Ajax 自动填充动态输入字段

Question

我有一张发票表格，用户可以根据需要添加任意数量的部分。当用户输入零件号时，我有一个自动填充描述和价格的 ajax 脚本。

该脚本适用于第一个初始输入字段，但是当我添加更多输入字段时，该脚本不适用于新输入字段：

******请检查我的更新****** - 仍然无法正常工作

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

添加更多按钮

<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

当你这样做时：

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

事件绑定到在调用 .on() 方法时存在的元素，例如文件加载。 对于动态创建的元素，您需要使用 event delegation。

因此，以父级为目标，说出包含输入的实际表并使用委托事件，例如：

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

这现在将通过查找冒泡到表而不是直接附加到这些元素的事件来侦听表的后代事件。

Answer 2

您正在使用 id。那就是问题所在。使用“id”时，第一个仅有效。当有多个元素时，总是使用类。

删除 id="partnumber" 并使用 class="partnumber"