onchange 仅适用于表中的第一行

Question

我正在从表中的选择选项标签中选择一个项目来填充数据库中的记录以填充另一个选择选项标签，但不幸的是，它仅适用于第一个表行。当我用 jquery 添加另一个表行时，它在新添加的表行中不起作用。

HTML 表格

<table class="table table-bordered table-hover">
    <thead>
        <tr>
        <th width="2%"><input id="check_all" type="checkbox"/></th>
        <th width="10%">Credit Type</th>
        <th width="20%">Credit Account</th>
        <th width="15%">Fund</th>
        <th width="15%">Amount</th>
        </tr>
        </thead>
        <tbody>
         <tr>
            <td><input class="case" type="checkbox"/></td>
           <td>
             <select name="fund_id" class="form control" id="type_1">
             <option></option>
             <option value="23">Expense</option>
             <option value="3">Fixed Asset</option>
             <option value="8">Current Asset</option>
             <option value="5">Current Liability</option>
            <option value="4">Non-Current Liability</option>                                    
            </select>
          </td>
          <td>
            <select id="credit_1" name="cr_ac" class="form-control" >
             <option></option>
            </select>
         </td>
         <td> <input type="text" name="fund[]" id="fund_1" ></td>
         <td><input type="text"  name="amount[]" id="amount_1"></td>
      </tr>
     </tbody>
    </table>

向表格添加新行的脚本

<script>
    var i=$('table tr').length;
    $(".addmore").on('click',function(){
        html = '<tr>';
        html += '<td><input class="case" type="checkbox"/></td>';
        html += '<td><select name="fund_id" class="form-control" id="type_'+i+'"><option></option><option value="23">Expense</option><option value="3">Fixed Asset</option><option value="8">Current Asset</option><option value="5">Current Liability</option><option value="4">Non-Current Liability</option></select></td>';
        html += '<td><select id="credit_'+i+'" name="cr_ac" class="form-control" ><option></option></select></td>';
        html += '<td><input type="text" name="fund[]" id="fund_'+i+'"></td>';
        html += '<td><input type="text" name="amount[]" id="amount_'+i+'"></td>';
       html += '</tr>';
        $('table').append(html);
        i++;
    });
</script>

ajax的onchange函数

<script>
for (var i = 1; i < 2; i++) {

    (function(i) {

       $(document).ready(function(){

          $("#type_"+i).change(function(){

            var id=$("#type_"+i).val();
            var dataString = 'id='+ id;

            $.ajax({
                   type: "POST",
                   url: "populate_debit_type.php",
                   data: dataString,
                   cache: false,
                   success: function(html){

                          $("#credit_"+i).html(html);
                   } 
            });

          });

       });

    })(i);

}
</script>

获取数据库记录的 PHP 脚本

<?php

include "includes/kon/db_connect.php";

    $id = $_POST['id'];
    // query for options based on value
    $sql = $link->query("SELECT * FROM accounts WHERE parent_id = '$id' OR ext_parent = '$id'");
    while($row = mysqli_fetch_array($sql)) {

       echo '<option value="'.$row['account_code'].'">'.$row['account_name'].'</option>';

   }
?>

谢谢

Answer 1

因为您在动态创建和注入新行之前注册了change 事件。因此，您为更改事件注册的代码仅适用于事件注册期间页面中存在的项目。它不适用于未来（动态注入到 DOM）元素。

为了使当前和未来的元素正常工作，您应该使用 jQuery ondelegation。

当您添加新行时，为您的选择元素指定一个 css 类名称。

$(".addmore").on('click',function(){
    //existing code
    html+= '<td><select class="form-control mySelect" id="type_'+i+'">'
});

并使用这个新的 css 类作为您的 jQuery 选择器，使用 jQuery on 方法注册 change 事件代码。此外，在您的 ajax 调用成功事件以获取第二个下拉列表的数据时，您应该使用 closest() 方法获取父 tr 的引用并使用 find() 方法获取对第二个下拉列表的引用。

$(function(){

   $(document).on("change",".mySelect",function(e){
      e.preventDefault();
      var _this=$(this);
      // use _this, which is jQuery object of the dropdown user changed
      var id =_this.val();

     //Get the second dropdown
     var _crac=_this.closest("tr").find("select[name='cr_ac']");

     $.ajax({
            type: "POST",
            url: "populate_debit_type.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
               _crac.html(html);
           } 
      });

   });

});

Answer 2

for (var i = 1; i

(function(i) {

$(document.body).on('change', '#type_"+ienter code here', 函数（事件）{

        var id=$("#type_"+i).val();
        var dataString = 'id='+ id;

        $.ajax({
               type: "POST",
               url: "populate_debit_type.php",
               data: dataString,
               cache: false,
               success: function(html){

                      $("#credit_"+i).html(html);
               } 
        });

      });

   });

(i);

}