多个元素上的一个 jQuery 更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15864307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
One jQuery Change Event on Multiple Elements
提问by user2182715
I have 3 textboxes, all with the same id's that I process into ASP by bringing it into a controller array
我有 3 个文本框，所有文本框都具有相同的 ID，我通过将其放入控制器数组来处理到 ASP
I have a link that adds an unlimited number of textboxes below the first 3.
我有一个链接，可以在前 3 个下方添加无限数量的文本框。
My current change statement:
我目前的变更声明：
$('input.#invent').change(function () {
works fine for the change event on the first textbox, but the others with the same information do not fire it when changed
适用于第一个文本框上的更改事件，但其他具有相同信息的文本框在更改时不会触发它
What is the best strategy for getting the change event to fire when any of the 3+ textboxes change??
当 3 个以上的文本框发生更改时，触发更改事件的最佳策略是什么？
采纳答案by dsgriffin
Change all three elements with the #inventID to a class instead (ID's must to be unique), or it's only going to work for the first element, like what's currently happening in your case.
将带有#inventID 的所有三个元素更改为一个类（ID必须是唯一的），否则它只会对第一个元素起作用，就像您的情况当前发生的情况一样。
Then, you can target all of the elements that have the .inventclass:
然后，您可以定位所有具有.invent该类的元素：
$('input.invent').change(function () {
// Here, $(this) refers to the specific element of the .invent class which 'changed'
}):
Read more about the difference between ID and Class selectors here.
在此处阅读有关 ID 选择器和类选择器之间区别的更多信息。
回答by webaholik
Best strategy (95% of the time): use a class to add a listener for multiple elements. ID's are expected to be unique. Classes are made for this and will give you the most extensibility in the future.
最佳策略（95% 的时间）：使用一个类为多个元素添加一个监听器。ID 应该是唯一的。类是为此而设计的，它将在未来为您提供最大的可扩展性。
HTML:
HTML：
<input type="text" name="input1" class="invent" />
<input type="text" name="input2" class="invent" />
jQuery:
jQuery：
$('.invent').change(function () {
// Do magical things
});
For the other 5%:
对于其他 5%：
If you'd rather use unique IDs or unique field names instead of a single class as described in the selected answer, you canadd a listener for multiple uniquely named elements like so:
如果您更愿意使用唯一 ID 或唯一字段名称而不是所选答案中描述的单个类，则可以为多个唯一命名的元素添加一个侦听器，如下所示：
HTML:
HTML：
<input type="text" name="something1" id="invent1" />
<input type="text" name="something2" id="invent2" />
<input type="text" name="something3" id="invent3" />
you can use jQuery multiple selectors:
您可以使用 jQuery多个选择器：
$('#invent1, #invent2, #invent3').change(function () {
// Do magical things
});
ORyou can use jQuery starts withattribute selector:
//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
});
回答by Eli
Since id is unique, you should using class instead. Then you can iterate over your class using each and apply $(this)to target current changeinput:
由于 id 是唯一的，因此您应该改用 class。然后，您可以使用 each 迭代您的类并应用于$(this)目标当前change输入：
$('input.invent').each(function () {
$(this).change(function () {
});
});
回答by pala?н
Lets say your HTML is like this:
假设您的 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" />
Now the Id must be unique. So put a class to all the inputs like inventand the HTML will be:
现在 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" />
And call the on change event like:
并调用 on change 事件，如：
// This would be called now for all the text-boxes
$('input.invent').change(function () {
// Your code here
}):
In case, you can't add class for all the text-boxes. You cam simply do this:
以防万一，您无法为所有文本框添加类。你只需这样做：
$("input:text").change(function () {
// Your code here
}):
回答by sarathkumar
@Eli answers exactly matches for you. If you want to read all the Text-boxes then you can use the following method.
@Eli 的答案与您完全匹配。如果要阅读所有文本框，则可以使用以下方法。
$('input[type=text]').each(function () {
$(this).change(function () {
alert($(this).val());
$(this).focus();
});
});
回答by Alytrem
You cannot use ID to reference more than one element. An ID must be UNIQUE on any HTML page !
您不能使用 ID 来引用多个元素。任何 HTML 页面上的 ID 必须是唯一的！
Use a class instead :-).
改用一个类:-)。
