多行使用相同的功能？

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？但是我如何使用单一方法在所有编辑框中共享功能。我想我会使用一个类，以及该类的方法.onexit？

Answer 1

您可以为此作业使用委派的事件处理程序：

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

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

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