Question

点击#add我正在呼叫add_table_row()以在表格中添加新行

    <tr class="item" id="item1">
         <td><input type="text" name="billProductList[0].product.name" 
               id="billProductList_0__product_name" class="name></td>
                    ..............   
   </tr>

与上述类似的每一行只有数字加一。

对于第一个.name jquery自动完成工作正常，但对于动态添加的行，它无法正常工作

function add_table_row() {
    var t = $('.table .item:last').attr('id');
    var prs = t.slice(4);
    var num1 = parseInt(prs) + 1;
    var dataString = 'rowId=' + num1;
    $.ajax({
        type: "POST",
        url: "getNewBillRow",
        data: dataString,
        dataType: "html",
        success: function(data) {
            $(".table .item:last").after(data);
        }
    });
}  

$(document).on('click', '#add', function(event) {
    event.preventDefault();
    add_table_row();
});     
$(".name").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "ProductByName",
            dataType: "json",
            data: {
                name: request.term,
                maxRows: 12
            },
            success: function(data) {
                response($.map(data.productList, function(item) {
                    console.log(item);
                    return {
                        label: item.name,
                        value: item.name,
                        id: item.id,
                        desc: item.desc,
                    }
                }));
            },
            error: function(data) {
                console.log(typeof data);
            }
        });
    },
    minLength: 1,
    select: function(event, ui) {
        log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        var pid = $(this).parents('.item').attr('id');
        //alert(ui.item.id + " " + ui.item.desc);
        $("#" + pid + " .id").val(ui.item.id);
        $("#" + pid + " .description").val(ui.item.desc);

    },
    open: function() {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function() {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});

如何让它适用于所有.name。

Answer 1

这是因为当您将autocomplete()绑定到。name时， DOM 中不存在其他控件（动态控件）。因此，您需要在将控件添加到 DOM。后重新绑定该函数你可以这样做：

function BindAutoComplete() {
$(".name").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "ProductByName",
            dataType: "json",
            data: {
                name: request.term,
                maxRows: 12
            },
            success: function(data) {
                response($.map(data.productList, function(item) {
                    console.log(item);
                    return {
                        label: item.name,
                        value: item.name,
                        id: item.id,
                        desc: item.desc,
                    }
                }));
            },
            error: function(data) {
                console.log(typeof data);
            }
        });
    },
    minLength: 1,
    select: function(event, ui) {
        log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        var pid = $(this).parents('.item').attr('id');
        //alert(ui.item.id + " " + ui.item.desc);
        $("#" + pid + " .id").val(ui.item.id);
        $("#" + pid + " .description").val(ui.item.desc);

    },
    open: function() {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function() {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});
}

然后在你的ajax电话中：

function add_table_row() {
    var t = $('.table .item:last').attr('id');
    var prs = t.slice(4);
    var num1 = parseInt(prs) + 1;
    var dataString = 'rowId=' + num1;
    $.ajax({
        type: "POST",
        url: "getNewBillRow",
        data: dataString,
        dataType: "html",
        success: function(data) {
            $(".table .item:last").after(data);
              BindAutoComplete(); 
        }
    });
 }

Answer 2

添加新行后，您需要在新添加的.name字段上初始化自动填充。

success: function(data) {
    $(".table .item:last").after(data);
    $(".table .item:last .name").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "ProductByName",
                dataType: "json",
                data: {
                    name: request.term,
                    maxRows: 12
                },
                success: function(data) {
                    response($.map(data.productList, function(item) {
                        console.log(item);
                        return {
                            label: item.name,
                            value: item.name,
                            id: item.id,
                            desc: item.desc,
                        }
                    }));
                },
                error: function(data) {
                    console.log(typeof data);
                }
            });
        },
        minLength: 1,
        select: function(event, ui) {
            log(ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
            var pid = $(this).parents('.item').attr('id');
            //alert(ui.item.id + " " + ui.item.desc);
            $("#" + pid + " .id").val(ui.item.id);
            $("#" + pid + " .description").val(ui.item.desc);

        },
        open: function() {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function() {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
}

Jquery自动完成功能不适用于动态添加的行

2 个答案: