вызвать функцию для каждого элемента в foreach, используя jQuery

Question

У меня есть модель представления, в которой есть сетка данных, подобная показанной ниже

<table>
@foreach (var item in Model)
                        //for(int i=0;i<Model.Count();i++)
                        {
                            using (Html.BeginForm("Edit", "Views", FormMethod.Post))
                            {
                                <tr>
                                    <td>
                                        @Html.TextBoxFor(modelItem => item.Description, new { id = "description" })

                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.DisplayAt, new { id = "displayat" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(m => item.selectedRegion, item.RegionsList, item.Region, new { id = "ddlregion" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(modelItem => item.Products, item.ProductsList, item.Products, new { id = "ddlproduct" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.Companies, item.CompaniesList, item.Companies, new { id = "ddlcompany" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.UserName, item.UserNamesList, item.UserName, new { id = "ddlusers" })
                                    </td>
                                    <td>

                                        @Html.CheckBoxFor(modelItem => item.Visible, new { id = "chkVisible" })
                                    </td>
                                    <td>                                            
                                        <input type="submit" value="Edit" id="button" />
                                    </td>

                                </tr>

                            }
                        }
</table>

Я написал функцию jquery для работы по нажатию кнопки с id = button

Однако это работает только для первого ряда. Когда я нажимаю на кнопки из второго ряда, функция не вызывается. Как написать jquery, который будет вызываться при нажатии любой из кнопок.

Мой код JQuery:

    $('#button').click(function () {
                    var product = $("#ddlproduct").find("option:selected").text();
                    var user = $("#ddlusers").find("option:selected").text();
                        *does something*
                        });

Это вызывается только для первого ряда. Я предполагаю, что есть что-то вроде кнопки foreach с идентификатором, по которому щелкают.

Answer 1

Как только вы измените свои идентификаторы на классы, чтобы они не ограничивались уникальностью, вы можете искать связанные элементы контекстно.

$('.button').click(function () {
    //get a reference to the row that contains the button that was clicked
    var $contextualRow = $(this).closest('tr');
    var product = $contextualRow.find(".ddlproduct").find("option:selected").text();
    var user = $contextualRow.find(".ddlusers").find("option:selected").text();

    *does something*
});

Answer 2

Дайте кнопке класс вместо идентификатора. <button class="button">Submit</button>

Это вызовет событие каждый раз, когда нажимается кнопка с кнопкой класса.

$('.button').click(function () {
                *does something*
                });

Чтобы получить значения, выбранные вами, вы можете сделать это контекстно, точно так же, как написал Taplar, или вы можете выбрать родителя кнопки и перейти к ее дочерним элементам:

var parent = $(this).parent().parent();
var product = $(".ddlproduct", parent).val();
var user = $(".ddlusers",  parent).val();

Не забудьте поменять эти идентификаторы на классы.