从 Razor 到 jQuery 获取动态创建的 TextBox ID答案

【问题标题】：Get Dynamically Created TextBox ID From Razor To jQuery从 Razor 到 jQuery 获取动态创建的 TextBox ID
【发布时间】：2016-08-26 16:13:44
【问题描述】：

我正在尝试将动态创建的 TextBox ID 从 Razor 视图中获取到 jQuery 中。 ID 在 HTML 中创建如下：

Product - 1: cartDetails_0__Quantity
Product - 2: cartDetails_1__Quantity

现在，当我将上述输入直接提供给 Ajax 调用时，它会更新相应的行。举个例子：

 @if (ViewBag.Cart != null)
        {
            for (int i = 0; i < cartDetails.Count(); i++)
            {
                <tr>
                    <td style="text-align: center;">@Html.TextBoxFor(model => cartDetails[i].Id)</td>
                    <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].IP)</td>
                    <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].ProductName)</td>
                    <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].Price)</td>
                    <td style="text-align: center;">@Html.TextBoxFor(model => cartDetails[i].Quantity, new { @class = "quantityUpdate", data_id = cartDetails[i].Id })</td>
                </tr>
            }
        }

var url = '@Url.Action("UpdateCart2")';
$(".quantityUpdate").change(function () {
    var id = $(this).data('id');

    $('.quantityUpdate').each(function (i, item) {
        $.post(url, { id: id, quantity: $('#cartDetails_' + 0 + '__Quantity').val() }, function (response) { //cartDetails_0__Quantity - The first TextBox ID
            if (response) {
                $("#TotalPrice").load(window.location + " #TotalPrice");
            }
        });
    })
    alert($('#cartDetails_' + 0 + '__Quantity').val());
});

有没有办法循环通过 jQuery 来获取 Razor 中动态生成的 TextBox ID？我尝试了以下但没有得到值：

 $('.quantityUpdate').each(function (i, item) {
        $.post(url, { id: id, quantity: $('#cartDetails_' + i + '__Quantity').val() }, function (response) { //cartDetails_0__Quantity - The first TextBox ID
            if (response) {
                $("#TotalPrice").load(window.location + " #TotalPrice");
            }
        });
    })

即使尝试过这个，但它只获得第一个 TextBox 的值：

     $('.quantityUpdate').each(function (i, item) {
        $.post(url, { id: id, quantity: $(this).val() }, function (response) { //cartDetails_0__Quantity - The first TextBox ID
            if (response) {
                $("#TotalPrice").load(window.location + " #TotalPrice");
            }
        });
    })

注意：我正在尝试使用 Ajax 调用更新向 TextBoxes 提供输入的行。文本框在视图中循环。在这方面，我必须获取动态生成的 HTML ID 的 ID。

【问题讨论】：

浏览器控制台有错误吗？
完全没有错误。只是无法获取对应的TextBox ID。
我在这里做了一个小例子：jsfiddle.net/8gh8ugke 似乎使用像你这样的 id
我看过你的例子，它有效。但就我而言，我不确定为什么它确实获得了所需的值，我的意思是没有获得关联的 TextBox 值。它不会将最近给定的值更新到 TextBox 我的意思是数量。这是我想做的一张图片：stackoverflow.com/questions/39142704
我能够解决它。只需将数量保存在这样的变量中： var quantity = $(this).val();现在这会从关联的 TextBoxes 中获取数量。

标签： c# jquery asp.net ajax

【解决方案1】：

您可以使用动态创建元素的 create 事件来获取它们的 ID。但请记住，要使用它，您需要使用 On()。见http://api.jquery.com/on/

另请参阅： Event binding on dynamically created elements? In jQuery, how to attach events to dynamic html elements?

PS。如果有更简洁的方法来获取动态创建的元素，我也会很高兴得到它:)

编辑。也许我不够清楚。没有确切的“创建”事件。您只需将所需的任何操作挂钩到 On()

另见jQuery "on create" event for dynamically-created elements

【讨论】：