jQuery onchange函数不适用于动态生成的选择标记

Question

在动态表格行中，我有一个选择标签。在Ajax的第一行中，我可以更改选择标签的值，但是在第二行动态选择标签中，如果我进行了任何更改，它将反映在第一行选择标签上，而不是在同一行上。

我在做什么错了？

$(document.body).on('change', '#carwash', function() {
  var washid = $(this).val();
  console.log(washid);
  if (washid) {
    $.ajax({
      type: 'POST',
      url: '<?php echo base_url();?>/Main/fetch_items',
      data: 'washid=' + washid,
      dataType: "html",
      success: function(response) {
        console.log(response);
        $('#product').html(response);
      }
    });
  }
});

$(document.body).on('click', '.product', function() {
  var product = $(this).val();
  console.log(product);
  $.ajax({
    type: 'POST',
    url: '<?php echo base_url();?>/Main/fetch_mesure',
    data: 'subid=' + product,
    dataType: "html",
    success: function(test) {
      console.log(test);
      $('#unit').val(test);
    }
  });

  $.ajax({
    type: 'POST',
    url: '<?php echo base_url();?>/Main/fetch_limit',
    data: 'subid=' + product,
    dataType: "html",
    success: function(test) {
      console.log(test);

      $('#quantity').val(test);
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_posts" class="table table-bordered table-hover tbl">
  <thead>
    <tr>
      <td>Wash type</td>
      <td>Product </td>
      <td>Unit</td>
      <td>One wash requirment</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody id="tbl_posts_body">
    <tr id="rec-1">
      <td>
        <select class="form-control custom-select" name='washtype[]' required id='carwash'>
          <option value="">Choose washtype</option>
          ?php foreach($washtype as $row): ?>
          <option value="<?php echo $row->id; ?>">
            <?php echo $row->service_name; ?>
          </option>
          <?php endforeach; ?>
        </select>
      </td>
      <td>
        <select class="form-control custom-select product" name='product[]' required id='product'>
          <option value="">Choose Product</option>
          <?php foreach($itemlist as $row): ?>
          <option value="<?php echo $row->id; ?>">
            <?php echo $row->item_name; ?>
          </option>
          <?php endforeach; ?>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" placeholder="wash limit" id="unit" name='unit[]' readonly>
      </td>
      <td>
        <input type="text" class="form-control" placeholder="wash limit" id='quantity' name='quantity[]' readonly>
      </td>
      <td>
        <div class="form-group has-success">
          <a class="btn btn-success btn-rounded pull-right add-record" data-added="0"> Add Row</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您需要通过公共类来更改ID的#carwash和#product，因为ID在同一文档中应该是唯一的，否则它将始终引用第一个元素（第一个元素）在此示例中，请按如下所示更改HTML代码中的ID：

<select class="form-control custom-select carwash" name='washtype[]' required>
<select class="form-control custom-select product" name='product[]' required>

然后在您的JS代码中：

$(document.body).on('change', '.carwash', function() {
  var washid = $(this).val();
  var product = $(this).closest('tr').find('.product');

  if (washid) {
    $.ajax({
      type: 'POST',
      url: '<?php echo base_url();?>/Main/fetch_items',
      data: 'washid=' + washid,
      dataType: "html",
      success: function(response) {
        product.html(response);
      }
    });
  }
});

Answer 2

只需更改控制事件。

 $(document.body).on('change', '.product', function() {
        var product = $(this).val();
        console.log(product);
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url();?>/Main/fetch_mesure',
            data: 'subid=' + product,
            dataType: "html",
            success: function(test) {
                console.log(test);
                $('#unit').val(test);
            }
        });

        $.ajax({
            type: 'POST',
            url: '<?php echo base_url();?>/Main/fetch_limit',
            data: 'subid=' + product,
            dataType: "html",
            success: function(test) {
                console.log(test);

                $('#quantity').val(test);
            }
        })
    });

Answer 3

1. 如果需要ID，则需要UNIQUE ID

2. 如果使用相对寻址，则不需要ID：

   var washtype = $(this).closest("tr").find("[name='washtype[]']")