15

我有 3 个文本框，它们都具有相同的 id，我通过将其带入控制器数组来处理 ASP

我有一个链接，可以在前 3 个下方添加无限数量的文本框。

我目前的变更声明：

    $('input.#invent').change(function () {

对于第一个文本框上的更改事件可以正常工作，但是具有相同信息的其他事件在更改时不会触发它

当 3 个以上的文本框发生更改时，触发更改事件的最佳策略是什么？

4

6 回答 6

17

最佳策略（95% 的时间）：使用一个类为多个元素添加监听器。ID 应该是唯一的。课程是为此而设计的，将来会为您提供最大的可扩展性。

HTML：

<input type="text" name="input1" class="invent" />
<input type="text" name="input2" class="invent" />

jQuery：

$('.invent').change(function () {
   // Do magical things
});

对于另外 5%：

如果您希望使用唯一 ID 或唯一字段名称而不是所选答案中描述的单个类，则可以为多个唯一命名的元素添加侦听器，如下所示：

HTML：

<input type="text" name="something1" id="invent1" />
<input type="text" name="something2" id="invent2" />
<input type="text" name="something3" id="invent3" />

您可以使用 jQuery多个选择器：

$('#invent1, #invent2, #invent3').change(function () {
   // Do magical things
});

或者你可以使用 jQuery以属性选择器开头：

//target based on what input id starts with
$('[id^="invent"]').change(function () {
   // Do magical things
});

// OR target based on input name attribute starts with
$('input[name^="something"]').change(function () {
   // Do magical things
});
于 2018-08-10T23:56:15.253 回答
12

将具有 ID 的所有三个元素更改#invent为一个类（ID必须是唯一的），或者它仅适用于第一个元素，就像您的案例中当前发生的情况一样。

然后，您可以定位所有具有.invent该类的元素：

$('input.invent').change(function () {
   // Here, $(this) refers to the specific element of the .invent class which 'changed'
}):

在此处阅读有关 ID 和 Class 选择器之间区别的更多信息。

于 2013-04-07T15:49:16.953 回答
6

由于 id 是唯一的，因此您应该改用 class。然后您可以使用 each 遍历您的类并应用于$(this)目标当前change输入：

$('input.invent').each(function () {
    $(this).change(function () {

    });
});
于 2013-04-07T15:51:26.613 回答
3

假设您的 HTML 是这样的：

<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent1" />
<input type="text" id="invent2" />
<input type="text" id="invent3" />

现在 Id 必须是唯一的。因此，为所有输入添加一个类，例如inventHTML 将是：

<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />

并调用 on change 事件，如：

// This would be called now for all the text-boxes
$('input.invent').change(function () {
   // Your code here
}):

以防万一，您不能为所有文本框添加类。您只需执行以下操作：

$("input:text").change(function () {
   // Your code here
}):
于 2013-04-07T16:23:36.787 回答
2

@Eli 为您回答完全匹配的问题。如果您想阅读所有文本框，则可以使用以下方法。

  $('input[type=text]').each(function () {
                    $(this).change(function () {
                        alert($(this).val());
                        $(this).focus();
                    });
                });
于 2016-10-28T10:36:35.317 回答
0

您不能使用 ID 来引用多个元素。ID 在任何 HTML 页面上都必须是唯一的！

改用一个类:-)。

于 2013-04-07T15:49:57.063 回答