Question

我从表中的select-option标记中选择一个项目来填充数据库中的记录以填充另一个输入字段，但不幸的是，它只适用于第一个表行。当我使用jquery添加另一个表行时，它在新添加的表行中不起作用。

        <table class="table table-borderd table-hover">
            <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Quantity</th>

                    <th>Discount %</th>
                    <th>Total</th>
                    <th><input type="button" class="btn btn-primary addmore" value="+"></th>
                </tr>
            </thead>
            <tbody id="itemlist2" class="detailss">
                <tr>
                    <td>
                        <select class="select-product form-control"  name="product_name[]">
                          <option value="">
                  </option>
                     <?php
                    foreach ($product as $key ):
                      ?>
                     <option value="<?php echo $key['id']  ?>">
                       <?php echo $key['product_name'] ?>
                     </option>
                    <?php  endforeach; ?>
                        </select>
                    </td>

                    <td>   
                        <input type="text" name="price[]"  class="price form-control" value="">
                   </td>

                    <td><input type="text"  name="quantity[]" class="form-control"></td>
                    <td><input type="text"  name="discount[]" class="form-control"></td>
                    <td><input type="text"  name="total[]" class="form-control"></td> 
              </tr>
          </tbody>
        </table>

将新行添加到表

的脚本

<script>
    var i=$('#itemlist2 tr').length;
    $(".addmore").on('click',function(){
        html = '<tr>';
        html += '<td><select class="select-product form-control" name="product_name[]">  <option value=""> </option><?php foreach ($product as $key ): ?><option value="<?php echo $key['id']  ?>"><?php echo $key['product_name'] ?></option><?php  endforeach; ?></select></td>';
        html += '<td><input type="text" name="price[]"  class="price form-control" value=""></td>';
        html += ' <td><input type="text" name="quantity[]" class="form-control"></td>';
        html += '<td><input type="text"  name="discount[]" class="form-control"></td>';
        html += '<td><input type="text"  name="total[]" class="form-control"></td>';
       html += '</tr>';
        $('#itemlist2').append(html);
        i++;
    });
</script>

带有ajax的onchange函数

        <script>
$(function() {

$(document).on('change', '.select-product',  function(){
          $(this).change(function(){
            var id=$(this).val();
            var dataString = 'id='+ id;
            $.ajax({
                   type: "GET",
                   url: "<?php echo site_url('/product/view_data'); ?>",
                   data: dataString,
                   cache: false,
                   success: function(html){
  $('.price').parent().parent().find('.price').val(html); 
                   } 
            });

          });

       });

    });

</script>

谢谢你的时间！

Answer 1

新添加的元素没有事件绑定。

最快的解决方法是从

更改您的事件绑定代码

$('input').change(function () {
  // Do some stuff.
});

到

$(document).on('change', 'input', function() {
  // Do some stuff.
});

Answer 2

检查以下几行：

html += '<td><select class="select-product form-control" id="product" ....

和

var id=$("#product").val();

您正在为多个行分配ID，并尝试使用唯一的 id 来获取值。这就是为什么你只获得第一行的数据。

要解决此问题，请使用类和 $（this）引用它以获取当前实例的值。

Answer 3

使用委托动态添加元素。例如

$(document).delegate( ".select-product", "change", function() {
      $(this).change(function(){
        var id=$(this).val();
        var dataString = 'id='+ id;
        $.ajax({
               type: "GET",
               url: "<?php echo site_url('/product/view_data'); ?>",
               data: dataString,
               cache: false,
               success: function(html){

                alert(html);
                    //  $("#price").val(html);
               } 
        });

      });

   });

});

我希望它会对你有所帮助。

更改仅适用于表中的第一行

3 个答案: