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

Question

I am trying to get the dynamically created TextBox ID into jQuery from Razor view. The IDs are created in HTML as follows:

Product - 1: cartDetails_0__Quantity
Product - 2: cartDetails_1__Quantity

Right now, when I give the above inputs directly to Ajax call, it updates the corresponding rows. As an example:

 @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());
});

Is there any way to loop through jQuery to get the dynamically generated TextBox ID in Razor? I've tried the following but doesn't get the value:

 $('.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");
            }
        });
    }) 

Even tried this one but it gets the value of first TextBox only:

     $('.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");
            }
        });
    }) 

Note : I am trying to update rows giving input to the TextBoxes with Ajax call. The TextBoxes are in a loop in the view. In this regards, I've to get the IDs of the dynamically generated HTML IDs.

Answer 1

You can use create event of dynamically created elements in order to get their Ids. But bear in mind to use this you need to use On(). See http://api.jquery.com/on/

See also: Event binding on dynamically created elements? In jQuery, how to attach events to dynamic html elements?

PS. If there is a cleaner way to get dynamically created elements I would also be glad to get it :)

Edit. Maybe I was not clear enough . There is no exactly "create" event. You just can hook any actions you need to On()

See also jQuery "on create" event for dynamically-created elements