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

Question

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

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

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

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

表格如下：

<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" 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>
                                        <?php foreach($marketItems as $item): ?>
                                        <option value="<?= $item['item_id']; ?>" data-itemname="<?= $item['item_description']; ?>" data-itemprice="<?= $item['regular_price']; ?>"><?= $item['item_description']; ?></option>
                                        <?php endforeach; ?>
                                        </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

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

  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; ?>';```