一个关于多个元素的jQuery更改事件

Question

我有3个文本框,所有文本框都具有相同的ID,我通过将其引入控制器数组来处理ASP

我有一个链接,在前3个下面添加了无限数量的文本框.

我目前的变更声明:

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

适用于第一个文本框上的更改事件,但具有相同信息的其他文件在更改时不会触发它

当3个以上的文本框中的任何一个发生变化时,更改事件的最佳策略是什么？

Answer 1

将具有#inventID的所有三个元素更改为类(ID 必须是唯一的),或者它仅适用于第一个元素,就像您的情况中当前正在发生的那样.

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

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

在此处阅读有关ID和类选择器之间差异的更多信息.

Answer 2

最佳策略（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
});

Answer 3

由于id是唯一的,因此您应该使用class.然后你可以使用每个迭代你的类并应用$(this)目标当前change输入:

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

    });
});