将事件绑定到具有相同名称的多个输入答案

【问题标题】：Bind event to multiple inputs that have same name将事件绑定到具有相同名称的多个输入
【发布时间】：2023-04-09 15:16:02
【问题描述】：

在我的 ASP MVC 页面中，我们有四个或五个不同的菜单可用，具体取决于用户单选按钮组的选择。其中一些字段共享一个文本输入框，我需要将其绑定到。但是，该事件仅在列表中的第一个菜单中起作用。是否可以将相同的事件绑定到共享相同名称的多个输入？

jQuery

    $('#LastName').change(function () {
        if ($('#LastName').val() == '') {
            $('#BankName').html("");
        } else {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetBankName", "Agent")',
                data: { routing: $('#RoutingNumber').val() },
                success: function (data) {
                    $('#BankName').val(data);
                    $('#BankName').text(data);
                }
            });
        }
    });

ASP MVC

页面加载时会显示此 HTML，但一次只能看到一个 fieldset。

            <fieldset id="Enroll" style="width:380px; display: none;">
            .
            .
                <div class="M-editor-label">
                    @Html.LabelFor(model => model.LastName)<span class="req">*</span>
                </div>
                <div class="M-editor-field">
                    @Html.TextBoxFor(model => model.LastName)
                </div> 
            <fieldset id="ModT" style="width:380px; display: none;">
            .
            .           
                <div class="M-editor-label">
                    @Html.LabelFor(model => model.LastName)<span class="req">*</span>
                </div>
                <div class="M-editor-field">
                    @Html.TextBoxFor(model => model.LastName)
                </div> 
            <fieldset id="ModA" style="width:380px; display: none;">
            .
            .
                <div class="M-editor-label">
                    @Html.LabelFor(model => model.LastName)<span class="req">*</span>
                </div>
                <div class="M-editor-field">
                    @Html.TextBoxFor(model => model.LastName)
                </div>

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-3 jquery-ui

【解决方案1】：

您正在使用 id，但它们应该是唯一的。

这就是它不起作用的原因，因为在执行$('#LastName') 时，jquery 使用document.getElementById 并且它总是返回单个元素。

改用类。如果您绝对需要多个 id（顺便说一下，这是无效的 HTML），您可以（但我不推荐）使用 $('[id=LastName]')

【讨论】：

太棒了！ 7 年前你拯救了我的一天:)

【解决方案2】：

只需更改 jQuery 选择器？

$('input[name=your-input-name]')

代替：

$('#LastName')

还有活页夹，以涵盖将来添加的输入：

$('input[name=your-input-name]').on("change", function () { });

【讨论】：