Jquery 检测 EditorTemplate 上的 TextBox 内容更改答案

【问题标题】：Jquery to detect TextBox content change on an EditorTemplateJquery 检测 EditorTemplate 上的 TextBox 内容更改
【发布时间】：2012-05-15 01:09:13
【问题描述】：

我需要检测文本框中的值是否已更改。如果文本框内容被更改/修改，我需要显示一个文本框并强制用户输入一些关于更改的 cmets。

这是我的 EditorTemplate 页面，位于 Shared/EditorTemplates/Addresses.cshtml

@Html.EditorFor(model => model.Address)
@Html.ValidationMessageFor(model => model.model.Address))
@Html.EditorFor(model => model.Comments,new{style="Visible:false" })
@Html.ValidationMessageFor(model => model.Comments ,new{style="Visible:false" })

这里是 MyPage.cshtml，我在其中调用了上面的 EditorTemplate

 @if (!UtilityHelper.IsNullOrEmpty(Model.AddressesRecords))
        {

             @Html.EditorFor(model => model.AddressesRecords)

         }

     <input type="submit" name="ButtonCommand" value="Save" />

页面加载后，会有多个地址文本框。如果用户对任何地址 TextBox 进行任何修改，CommentsTextBox 将立即在该特定地址 TextBox 处可见，并启用验证。

所以当我点击保存按钮时，我需要确保用户在 CommentsTextBox 中键入了一些 cmets。如果用户在没有更改地址文本框的情况下单击保存按钮，则记录将被保存。

在运行时，我可以看到编辑器 id 是动态生成的，例如 AddressesRecords_0_Address ,AddressesRecords_1_Address ......

我尝试了一些 Jquery，但这似乎永远不会工作，因为实际的 AddressTextBox id 是动态生成的。

<script type="text/javascript">


    $(document).ready(function(){

       var $el = $('#AddressesRecords_0_Address');
       $el.data('oldVal',  $el.val() );


       $el.change(function(){

            $("#AddressesRecords_0_Comments").show();
       })

    });
</script>

如何在我的每个 addressTextBox 上附加我的 Jquery 更改函数？

【问题讨论】：

标签： javascript asp.net-mvc-3 jquery-ui c#-4.0

【解决方案1】：

假设我有 3 个不同的文本框，分别命名为 TextBox1、TextBox2 和 TextBox3，此代码将检查这些字段中的任何更改并显示 Comments 字段

$('#TextBox1, #TextBox2, #TextBox3').each(function () {
    $(this).data('oldVal', $(this).val());
    $(this).bind("propertychange keyup input paste", function (event) {
        if ($(this).data('oldVal') != $(this).val()) {
            $(this).data('oldVal', $(this).val());

            $('#Comments').show();
        }
    });
});

您还可以为每个字段分配一个类并像这样进行操作

$('.MyClass').each(function () {
    $(this).data('oldVal', $(this).val());
    $(this).bind("propertychange keyup input paste", function (event) {
        if ($(this).data('oldVal') != $(this).val()) {
            $(this).data('oldVal', $(this).val());

            $('#Comments').show();
        }
    });
});

【讨论】：