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。那就是问题所在。当使用＆＃34; id＆＃34;时，第一个只能工作。当有多个元素时，始终使用class。

删除id =＆＃34; partnumber＆＃34;并使用class =＆＃34; partnumber＆＃34;

Ajax自动填充动态输入字段

2 个答案: