使用同一功能的多行？

Question

我有一个类别网格，用户可以在其中使用编辑框为每个类别分配一个值。 当前，编辑框是静态的代码：

<input style="text-align: right" type="text" value="@(sub.BudgetAmount.HasValue ? sub.BudgetAmount.ToString() : "")" />

它们是通过数据库中的项目列表通过Foreach生成的。

<div id="ccl@(cat.Id)" class="collapse collapsed collapse-categories">
    @foreach (var sub in Model.Lines.Where(x => x.CategoryId == cat.Id))
    {
        <div class="row table_row">
        <div class="col-xs-12 col-lg-4 small-bold-cell"><a href="@Url.Action("EditSubCategory", "Category", new {id = sub.SubCategoryId})" class="btn btn-xs btn-success">View</a>&nbsp;&nbsp;&nbsp;@sub.SubCategory</div>
        <div class="col-xs-4 col-lg-2 small-cell ">
            <input style="text-align: right" type="text" value="@(sub.BudgetAmount.HasValue ? sub.BudgetAmount.ToString() : "")" />
        </div>
        <div class="col-xs-4 col-lg-2 small-cell text-right">@sub.SpentAmount</div>
        <div class="col-xs-4 col-lg-2 small-cell text-right">@sub.Remaining</div>
        <div class="col-xs-2 col-lg-2 small-cell visible-lg text-right">@sub.Transactions</div>
        </div>
    }
</div>

我需要做的是，当用户更改编辑框的值时，我需要调用一个带有ID的jquery函数（我可以通过某种方式将行的ID作为标签添加到我的编辑框中？），和输入的金额，然后致电我的控制器（即，保存与ID关联的值）。

如何编写单个javascript方法，该方法基于用户已修改的行调用保存函数？ 我不确定这个概念如何运作。

现在，我只需要一种方法来修改此代码，调用javascript方法，即可“警告”所选行的ID，以及我刚刚在其中跳出标签的编辑框中的值，或按“ Enter”键在。

从视觉上看，这是我的屏幕外观：

我想可以在编辑框中添加“ data-id = 7”之类的内容，以获取ID？ 但是，我只有一个方法可以在所有编辑框中共享该功能。 我想我会使用一个类，以及该类的方法。

Answer 1

您可以为此任务使用委托的事件处理程序：

$('body').on('change', 'input.change-handled', myJqueryFunction);

确保为您的输入提供change-handled类，并让myJqueryFunction读取调用事件的元素的data-id属性：

function myJqueryFunction() {
    var dataId = $(this).attr('data-id');
}