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[]']")