重复绑定 JSON 结果

Question

我正在尝试将 JSON 结果绑定到动态生成的文本框，它在单个文本框上运行良好，但不适用于动态生成的文本框，它在所有文本框上复制相同的值，我正在分享我到目前为止所做的事情：

查询：

function bindAutoComplete(classname) {
    $("." + classname).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/Admin/Ticket/GetPart',
                type: "GET",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    if (data != null) {
                        if (data.length > 0) {
                            response($.map(data, function (item) {
                                return { label: item.PartNumber, value: item.PartNumber };
                            }))
                        }
                        else {
                            response([{ label: 'No results found.' }]);
                        }
                    }
                }
            })
        },
    });

}

function bindData() {
    var errormsg = "";
    var amount = $('.inputs').val();

    $.ajax({
        type: "GET",
        url: '/Admin/Ticket/GetPart',
        data: { 'term': amount },
        dataType: "json",
        success: function (data) {
            if (data != null) {
                if (data.length > 0) {

                    $('.buyingprice').val(data[0].Price);
                }
                else {

                    $('.buyingprice').val('');
                }
            }

        },
        error: function (jqXHR, exception) {
            $('#error').html(jqXHR)
        }
    });
};

// fetch part number
$(document).ready(function () {
    bindAutoComplete('inputs');
    $('.inputs').keyup(bindData)
});

$("#AddMore").click(function () {

    $("#maintable").each(function () {

        var tds = '<tr>';

        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';

        if ($('tbody', this).length > 0) {

            $('tbody', this).append(tds);
            //   bindData();
            bindAutoComplete('inputs');
            $("#delete").fadeIn('200');
        }
        else {
            $(this).append(tds);
            bindAutoComplete('inputs');
            //    bindData();

        }
    });

});

HTML：

 <table id="maintable">
    <thead>
        <tr>
            <th>
                Part No
            </th>
            <th>
                BP
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input class="inputs" type="text" name="abcd" id="PartNumber23" style="width:130px;" />
            </td>
            <td>
                <input class="buyingprice text-box single-line" id="BuyingPrice" name="BuyingPrice" type="text" value="" />
            </td>
        </tr>
    </tbody>
</table>

输出图像

我从所有动态文本框的自动完成中获取结果，并将值分别绑定到动态文本框，但它在所有动态文本框上绑定相同的值。我已经搜索了互联网，但找不到任何解决方案。请指导我，我从 2 天起就被困在这里了

Answer 1

有一些潜在的问题。和你一起使用 JavaScript。这个

$('.inputs').keyup(bindData)

仅将 keyup 绑定到创建 DOM 时存在的具有 classname = "input" 的元素。为确保其绑定到动态创建的元素，请使用

$("#maintable").on('keyup', '.inputs', function() {...

在bindData(){..，这一行

var amount = $('.inputs').val();

使用 classname = "input" 获取 first 输入的值（不是您可能想要的）。这一行

$('.buyingprice').val(data[0].Price);

将类名 = "buyingprice" 的 all 输入的值设置为 data[0].Price。

您需要在要引用当前元素的地方使用$(this)。

在$("#AddMore").click(function () {...

$("#maintable").each(function () {

似乎毫无意义，因为您似乎只有一张 id = "maintable" 的表，并且

bindAutoComplete('inputs');

正在重新绑定所有输入（包括您已经绑定的输入）。

Answer 2

因为您使用的是“GET”类型，因为 GET 方法会将数据缓存在浏览器中。如果每个请求的数据都是新的，则使用“POST”。

别忘了也用 [HttpPost] 来装饰你的 Controller 方法。

$.ajax({
                url: '/Admin/Ticket/GetPart',
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    if (data != null) {
                        if (data.length > 0) {
                            response($.map(data, function (item) {
                                return { label: item.PartNumber, value: item.PartNumber };
                            }))
                        }
                        else {
                            response([{ label: 'No results found.' }]);
                        }
                    }
                }
            })