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

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

要使当前和 future 的元素正常工作，您应该使用 jQuery on代表团。

添加新行时，为您的选择元素指定一个 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);
           } 
      });

   });

});