我有3个文本框,它们的ID都相同,我通过将它们带入控制器数组中进行处理并将其转换为ASP。
我有一个链接,可以在前三个文本框下方添加无限数量的文本框。
我的当前更改语句:
$('input.#invent').change(function () {
对于第一个文本框的更改事件,功能正常, 但是其他具有相同信息的文本框在更改时不会触发它。
如何最好地使当3个或以上的文本框更改时能够触发更改事件?
我有3个文本框,它们的ID都相同,我通过将它们带入控制器数组中进行处理并将其转换为ASP。
我有一个链接,可以在前三个文本框下方添加无限数量的文本框。
我的当前更改语句:
$('input.#invent').change(function () {
对于第一个文本框的更改事件,功能正常, 但是其他具有相同信息的文本框在更改时不会触发它。
如何最好地使当3个或以上的文本框更改时能够触发更改事件?
最佳策略(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
});
#invent
ID的三个元素更改为类(ID必须是唯一的),否则它只能适用于第一个元素,就像目前在您的情况下发生的那样。
然后,您可以针对所有具有.invent
类的元素进行定位:
$('input.invent').change(function () {
// Here, $(this) refers to the specific element of the .invent class which 'changed'
}):
因为id是唯一的,所以应该使用class。然后可以使用each遍历您的类,并将$(this)
应用于当前的change
输入:
$('input.invent').each(function () {
$(this).change(function () {
});
});
id
值可以在已知元素 id
的模式时有助于选择。例如 control_1235
、control_12543
等。 - GoldBishop<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" />
invent
,HTML 将如下所示:<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
}):
@Eli的答案完全符合您的需求。如果您想要阅读所有文本框中的内容,您可以使用以下方法。
$('input[type=text]').each(function () {
$(this).change(function () {
alert($(this).val());
$(this).focus();
});
});
$('input[type=text]').on('change', function(){....});
或者甚至是 $('input[type=text]').change(function(){....});
。 - GoldBishop你不能使用ID来引用多个元素。在任何HTML页面上,ID必须是唯一的!
请改用类(class)代替 :-).
id
属性来捕获多个控件。关于模板化,你可以使用已知的 id
模式来捕获多个元素。 - GoldBishop
id
的值必须是唯一的,这是“标识符”的全部意义所在。 - T.J. Crowder$ ('input.#invent')
能工作吗?这是无效的语法。 - karthikr