php - Jquery 自动完成文本字段，动态添加的行中具有数据属性

Question

以下 jQuery 可以很好地添加行，并从 php/mysql 文件填充选择列表。我遇到的问题是价格字段正在自动填充并在添加的每个新行上选择更改时更改...但是如果您返回并尝试更改已添加的行之一，它不起作用。例如，如果您添加 4 个空白行，然后尝试返回并选择产品，则它只会填充最后一行的价格。或者，如果您添加每一行并在添加新行之前选择产品，然后返回并尝试更改产品，则先前选择的价格将保持不变。有任何想法吗？

编辑 1 添加了 html

编辑 2 将 jQuery change(function() 更改为 on()...仍然工作得完全相同。自动完成仅适用于添加的最后一行。

var count = 0;

$(document).ready(function(){

$('p#add_field').click(function(){

    count += 1;

    $('#addingContainer').append('<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');

    $.getJSON('includes/productrow.php', function(data){
            var select = $('#product_' + count + '');
            $.each(data, function(key, val) {
                $('<option/>').attr('value', val.product_id)
                              .attr('data-price', val.price)
                              .html(val.product)
                              .appendTo(select);
    });

    $('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
    });

    $('#addingContainer').on('change', 'select[id="product_' + count + '"]', function(){

        $('#price_' + count +'').val($('select[id="product_' + count + '"] option:selected').data('price'));

});});});

HTML:

<div id="addingContainer" class="pure-control-group">
         <p id="add_field"><a href="#"><span>Add Products</span></a></p>
         </div>

Answer 1

编辑实际上，我认为它不起作用的原因是你声明计数的位置。像这样的事情会起作用:

$(document).ready(function(){

$('p#add_field').click(function(){
    var count = $('#addingContainer').data("count") || 0;
    count += 1;

    $('#addingContainer').data("count", count).append('<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');

    $.getJSON('includes/productrow.php', function(data){
            var select = $('#product_' + count + '');
            $.each(data, function(key, val) {
                $('<option/>').attr('value', val.product_id)
                              .attr('data-price', val.price)
                              .html(val.product)
                              .appendTo(select);
    });

    $('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
    });

    $('#addingContainer').on('change', 'select[id="product_' + count + '"]', function(){

        $('#price_' + count +'').val($('select[id="product_' + count + '"] option:selected').data('price'));

});});});

注意，我删除了 document.ready 之外的初始 count 声明和函数闭包；这使您可以跟踪它(我通过在数据属性上设置它来处理它，还有其他更好的方法)，但这就是为什么您的 on('change' 方法始终使用最高计数。

通过在函数内部声明 count，它是特定于该闭包的 - 因此，每次触发新的单击事件时，您声明的所有函数都不会增加它。