多个元素绑定一个jQuery改变事件

Question

我有3个文本框，它们的ID都相同，我通过将它们带入控制器数组中进行处理并将其转换为ASP。

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

我的当前更改语句：

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

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

如何最好地使当3个或以上的文本框更改时能够触发更改事件？

- user2182715

---

"我有3个文本框，它们的id相同。" 这就是你的问题所在。不要这样做。在文档中，id的值必须是唯一的，这是“标识符”的全部意义所在。 - T.J. Crowder

你确定 $ ('input.#invent') 能工作吗？这是无效的语法。 - karthikr

我对jquery/javascript非常陌生，但是没错，它起作用了。 - user2182715

Answer 1

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

- webaholik

Answer 2

将所有具有#invent ID的三个元素更改为类（ID必须是唯一的），否则它只能适用于第一个元素，就像目前在您的情况下发生的那样。

然后，您可以针对所有具有.invent类的元素进行定位：

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

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

- dsgriffin

---

谢谢@lifetimes - 我在发一个问题到SO之前就发现了这个解决方案。 - VegaStudios

Answer 3

因为id是唯一的，所以应该使用class。然后可以使用each遍历您的类，并将$(this)应用于当前的change输入:

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

    });
});

- Eli

---

使用元素唯一的 id 值可以在已知元素 id 的模式时有助于选择。例如 control_1235、control_12543 等。 - GoldBishop

Answer 4

假设您的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必须是唯一的。 因此，请将所有输入框添加一个类，例如 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
}):

- palaѕн

Answer 5

@Eli的答案完全符合您的需求。如果您想要阅读所有文本框中的内容，您可以使用以下方法。

  $('input[type=text]').each(function () {
                    $(this).change(function () {
                        alert($(this).val());
                        $(this).focus();
                    });
                });

- sarathkumar

---

为什么要这样做呢？似乎过于复杂，当你可以简单地使用 $('input[type=text]').on('change', function(){....}); 或者甚至是 $('input[type=text]').change(function(){....});。 - GoldBishop

Answer 6

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

请改用类(class)代替 :-).

- Alytrem

---

没错。在多个元素上添加相同的ID也是语义上错误的。请记住，ID可以用来链接页面的特定部分，这是在锚标签之前完成的。这不是您的答案，但在编写标记时请牢记这一点。 - lazyprogrammer

这在技术上是不正确的，你可以使用元素的 id 属性来捕获多个控件。关于模板化，你可以使用已知的 id 模式来捕获多个元素。 - GoldBishop