已解决 添加新元素时以 html 形式动态创建 ID，然后传递 .on 更改功能

Question

我有这段代码并且它有效，我可以添加新行并删除它们。

问题是当我从选择输入中选择和选项时，它会使用正确的信息更改两个输入。

当我添加新行或多行时。我从选择输入中选择一个选项（创建的任何选择输入）会更改具有相同信息的所有输入。

我认为问题出在三个元素的 ID 上，因此新元素它们具有相同的 ID。我尝试了一堂课，但遇到了同样的问题。

表格如下：

<form method="post" action="/add">
    <input class="form-control" name="market_id" value="market_id" hidden>
    <div class="card mb-4">
        <div class="row card-body" id="inputFormRow">
        <div class="col-md-6 mb-2">
                <label class="form-label">Item</label>
                <select class="form-select mySelect" name="market_items[]" id="mySelect" required>
                <option></option>
                <option value="m_id" data-itemname="m_name" data-itemprice="m_price"></option>
                <option value="m_id_1" data-itemname="m_name_1" data-itemprice="m_price_1"></option>
                <option value="m_id_2" data-itemname="n_name_2" data-itemprice="m_price_2"></option>
            </select>
        </div>
        <input type="hidden" class="form-control myItemName" id="myItemName" name="itemName[]">
        <input type="hidden" class="form-control myItemPrice" id="myItemPrice" name="itemPrice[]">
        <div class="col-md-2 mb-2">
            <label class="form-label">Quantity</label>
            <input type="number" class="form-control" name="market_items_qty[]" required>
        </div>
        <div class="col-md-1 mb-2">
            <label class="form-label">Box(s)::EA</label>
            <select class="form-select" name="market_items_unit[]" required>
                <option></option>
                <option value="Box(s)">Box(s)</option>
                <option value="Each">Each</option>
            </select>
        </div>
        <div class="col-md-1 mb-2">
            <label class="form-label">Del::Row</label>
            <button id="removeRow" type="button" class="form-control btn btn-outline-danger">Remove</button>
        </div>
    </div>
    <div id="newRow"></div>
    </div>
    <div class="d-grid gap-2" hidden>
        <button id="addRow" type="button" class="btn btn-outline-info mb-3">Add Row</button>
    </div>
    <div class="d-grid gap-2">
        <button type="submit" class="btn btn-primary">ADD</button>
    </div>
</form>

这是js/jquery代码：

// add row
$("#addRow").click(function () {
    var html = '';

    html += '<div class="row card-body" id="inputFormRow">';

    html += '<div class="col-md-6 mb-2">';
    html += '<label class="form-label">Item</label>';
    html += '<select class="form-select mySelect" name="market_items[]" id="mySelect" required>';
    html += '<option></option>';
    html += '<?php foreach($marketItems as $item): ?>';
    html += '<option value="<?= $item['item_id']; ?>" data-itemname="<?= $item['item_description']; ?>" data-itemprice="<?= $item['regular_price']; ?>"><?= $item['item_description']; ?></option>';
    html += '<?php endforeach; ?>';
    html += '</select>';
    html += '</div>';

    html += '<input type="hidden" class="myItemName" id="myItemName+=ticks;" name="itemName[]">';
    html += '<input type="hidden" class="myItemPrice" id="myItemPrice+=ticks;" name="itemPrice[]">';

    html += '<div class="col-md-2 mb-2">';
    html += '<label class="form-label">Quantity</label>';
    html += '<input type="number" class="form-control" name="market_items_qty[]" required>';
    html += '</div>';

    html += '<div class="col-md-2 mb-2">';
    html += '<label class="form-label">Box(s)::EA</label>';
    html += '<select class="form-select" name="market_items_unit[]" required>';
    html += '<option></option>';
    html += '<option value="Box(s)">Box(s)</option>';
    html += '<option value="Each">Each</option>';
    html += '</select>';
    html += '</div>';

    html += '<div class="col-md-2 mb-2">';
    html += '<label class="form-label">Del::Row</label>'
    html += '<button id="removeRow" type="button" class="form-control btn btn-outline-danger">Remove</button>';
    html += '</div>';

    html += '</div>';

    $('#newRow').append(html);
});

// remove row
$(document).on('click', '#removeRow', function () {
    $(this).closest('#inputFormRow').remove();
});

$(document.body).on('change', '#mySelect', function() {
    // Get the selected option's data attribute value
    var itemName = $(this).find('option:selected').data('itemname');
    var itemPrice = $(this).find('option:selected').data('itemprice');
                                
    // Update the hidden input's value
    $('#myItemName').val(itemName);
    $('#myItemPrice').val(itemPrice);
});

我不知道如何动态生成 ID 以及如何在更改功能上传递 ID。欢迎任何帮助！

Answer 1

无需创建动态ID。使用

class

概念。

此外，使用

.clone()

方法来缩短代码。

由于您将使用

clone

动态生成新行，因此请使用

.on

进行事件处理

这是示例代码：

$(document).on('click', "#addRow", function() {
  $('#newRow').append($('.card-body:first').clone());
});
$(document).on('click', ".removeRow", function() {
  if ($('.card-body').length == 1) {
    alert('Minimum one row is required, so you cannot delete');
    return false;
  }
  $(this).closest('.card-body').remove();
});

$(document.body).on('change', '.mySelect', function() {
  // Get the selected option's data attribute value
  var itemName = $(this).find('option:selected').data('itemname');
  var itemPrice = $(this).find('option:selected').data('itemprice');

  // Update the hidden input's value
  $(this).closest('.card-body').find('.myItemName').val(itemName);
  $(this).closest('.card-body').find('.myItemPrice').val(itemPrice);
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form method="post" action="/add">
  <input class="form-control" name="market_id" value="<?= $market['market_id']; ?>" hidden>
  <div class="card mb-4">
    <div class="row card-body">
      <div class="col-md-6 mb-2">
        <label class="form-label">Item</label>
        <select class="form-select mySelect" name="market_items[]" required>
          <option></option>
          <option value="1" data-itemname="my_item_1" data-itemprice="10">my_item_1</option>
          <option value="2" data-itemname="my_item_2" data-itemprice="20">my_item_2</option>
        </select>
      </div>
      <input type="hidden" class="form-control myItemName" name="itemName[]">
      <input type="hidden" class="form-control myItemPrice" name="itemPrice[]">
      <div class="col-md-2 mb-2">
        <label class="form-label">Quantity</label>
        <input type="number" class="form-control" name="market_items_qty[]" required>
      </div>
      <div class="col-md-1 mb-2">
        <label class="form-label">Box(s)::EA</label>
        <select class="form-select" name="market_items_unit[]" required>
          <option></option>
          <option value="Box(s)">Box(s)</option>
          <option value="Each">Each</option>
        </select>
      </div>
      <div class="col-md-1 mb-2">
        <label class="form-label">Del::Row</label>
        <button type="button" class="form-control btn btn-outline-danger removeRow">Remove</button>
      </div>

    </div>
    <div id="newRow"></div>
  </div>
  <div class="d-grid gap-2" hidden>
    <button id="addRow" type="button" class="btn btn-outline-info mb-3">Add Row</button>
  </div>
  <div class="d-grid gap-2">
    <button type="submit" class="btn btn-primary">ADD</button>
  </div>
</form>

Answer 2

对于选项值，也使用索引变量

  html += '<?php foreach($marketItems as $index => $item): ?>';
  html += '<option value="<?= $item['item_id'].$index; ?>" data-itemname="<?= $item['item_description']; ?>" data-itemprice="<?= $item['regular_price']; ?>"><?= $item['item_description']; ?></option>';
  html += '<?php endforeach; ?>';```