Невозможно получить / связать правильный идентификатор объекта в JQuery, всегда получает первый идентификатор элемента из итерации

Question

У меня есть PartialView, где я перебираю коллекцию сущностей и отображаю их в Html таблице. У одной из колонок этой таблицы есть с классом шрифтов awesome (fa fa-times-circle). Я устанавливаю свойство "id" этого в "Id" моего объекта, который я повторяю. Я устанавливаю помощник HiddenFor, чтобы получить Id в JQuery, но я всегда получаю верхний элемент из таблицы HTML.

Когда я смотрю на вывод HTML, все Id выглядят хорошо, однако, когда я попробуйте получить это в JQuery следующим образом:

<script type="text/javascript">
        $(function () {
        $("body").delegate(".fa", "click", function () {

            //Content to send
            var subscriptionId = $('#Subscription_SubscriptionId').val();

            $.get('@Url.Action("Action", "Controller")', { "subscriptionId": subscriptionId},
                function (result) { $('#SubscriptionBody').html(result); }
                );
         });
         });
</script>

У меня всегда есть элемент Top таблицы.

Вот как я повторяю на мой частичный взгляд:

foreach (var subscription in Model.Subscriptions)
{
    // tried both HiddenFor & Hidden but same results ... (HiddenFor should be used in my opinion)
    // when iterating all Id's are "good" (Different as they should be)
    @Html.HiddenFor(Model => Model.Subscription.SubscriptionId, new { Value = subscription.SubscriptionId })
    // @Html.Hidden("SubscriptionId", new { Value = subscription.SubscriptionId })

    <tr>           
        <td>@subscription.SubscriptionId</td>            
        <td>... some other values ...</td>  
         @if (condition)
         {
            <td>                    
                <i class="fa fa-user-plus fa-2x" id="@subscription.SubscriptionId"></i>
            </td>
         }
         else
         {
            <td>                   
                <i class="fa fa-times-circle fa-2x" id="@subscription.SubscriptionId"></i>
            </td>
         }
    </tr>
}

Что я делаю не так? Очевидно, я хочу получить "subscription.SubscriptionId" того, который я щелкнул в таблице, но каким-то образом он всегда занимает верхний.

Спасибо за любые предложения или ответы!

Answer 1

Мне кажется, что вы можете получить вот так

var subscriptionId = $(this).attr('id');

Объясните:

1. $('#Subscription_SubscriptionId').val() означает: вы получаете значение из элемента Subscription_SubscriptionId вместо значения из fa fa-times-circle.
2. Вы можете прочитать эту запись ответа @Owais Alam, чтобы узнать разницу между attr и data в jquery.

Или вы можете рефакторинг ваш код следующим образом

HTML:

<i class="fa fa-times-circle fa-2x" data-id="@subscription.SubscriptionId">

Jquery

var subscriptionId = $(this).data('id');