Question

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

JQUERY：

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>

输出图像

Result Image

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

Answer 1

有一些潜在的问题。和你一起javascript。此

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

仅将keyup绑定到创建DOM时存在的classname =“input”的元素。要确保绑定到动态创建的元素，请使用

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

在bindData(){..中，此行

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

使用classname =“input”获取第一个输入的值（不是您可能需要的值）。这一行

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

将classname =“buyprice”的所有输入值设置为data[0].Price。

您需要使用$(this)来引用当前元素。

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

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

似乎毫无意义，因为您似乎只有一个表具有id =“maintable”和

bindAutoComplete('inputs');

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

Answer 2

因为您正在使用＆＃34; GET＆＃34;键入GET方法将缓存浏览器中的数据。使用＆＃34; POST＆＃34;如果每个请求的数据都是新的。

也不要忘记用[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.' }]);
                        }
                    }
                }
            })

重复绑定JSON结果

2 个答案: