javascript - 如何检测表单中的数据是否已更改？多维 Controller

Question

注意:我已经在这个论坛上看到了一些解决方案，但它们不适用于我的具体情况。

在我的应用程序中，用户始终使用模式窗口编辑数据。当模式第一次打开时，只有一个“关闭”按钮可见。如果用户更改任何文本，该按钮将立即隐藏，“取消”和“保存”按钮将变为可见。据我所知，实现这种方法的唯一方法是将一个事件连接到所有文本控件。文本控件的数量因表单而异，但不超过 50 个。我需要“id”并将“change”事件绑定(bind)到表单中的每个控件中。我的问题是，是否有更简单的方法？如果表单中的任何内容发生变化，就像一个事件？如果用户更改数据然后将其更改回来并且事件无论如何都会被触发，这是可以的。

@using (Html.BeginForm("", "", FormMethod.Post, new { @id = "formPostUnitDetails", @style = "padding-right:5px" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.IdNo)

    @Html.LabelFor(m => m.UnitNo)
    @Html.TextBoxFor(m => m.UnitNo, new { @id="txtUnitNo")
    //..... 49 more text controls 

    <div class="panel-footer" style="margin-top:5px;">
        <input id="btnCancel" type="button" class="btn btn-danger" data-dismiss="modal" value="CANCEL" style=" display: none;" />
        <input id="btnSave" type="button"   class="btn btn-success" value="SAVE CHANGES" style=" display: none;" />
        <input id="btnClose" type="button" class="btn btn-info" data-dismiss="modal" value="CLOSE" />
    </div>

$(document).on("change", "#txtUnitNo", function () { EnableButtons(); })
// 49 more text controls 

function EnableButtons() {
    $("#btnCancel").show();
    $("#btnSave").show();
    $("#btnClose").hide();
}

Answer 1

您可以将事件连接到所有输入，而不是将事件处理程序连接到您拥有的每个输入。

$('form input[type="text"]').on('change', function() {
    EnableButtons();
});

这相当于选择器 form input[type="text"] 选择表单内的所有输入元素(文本类型)，然后绑定(bind) change 事件他们的处理程序。

另一种选择是将您想要监视的所有输入分配给一个类，例如 change-monitored，然后您可以将选择器更改为 $('.change-monitored' ).on(...)

<小时/>

演示

$('.changable').on('change', function(e) {
  $('#log').append(e.target.id + ' changed to ' + $(e.target).val() + '<br/>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="changable" id="input1" />
  <input type="text" class="changable" id="input2" />
  <input type="text" class="changable" id="input3" />
  <input type="text" class="changable" id="input4" />
  <input type="text" class="changable" id="input5" />
</form>

<div id="log"></div>