jQuery如何正确使用onChange答案

【问题标题】：jQuery how to properly use onChangejQuery如何正确使用onChange
【发布时间】：2013-05-03 08:46:56
【问题描述】：

我正在使用 Drupal 7（对 Drupal 和 Javascript / jQuery 来说都是新的）并且我有一个名为“field-name-field-activity”的类，现在我想要的是在该类中对每个输入进行 onchange .

jQuery('.field-name-field-activity :input').onchange = function() {
    //enter code here
};

我不确定我是否在这里使用我的 onchange，我还看到有些人使用 onChange 而不是 onchange，不知道有什么区别，但是谁能告诉我如何在我的示例中正确使用 onchange ?

【问题讨论】：

您应用此事件的 html 元素的类型是什么？
是文本类型的输入。
您想将事件处理程序绑定到具有class="field-name-field-activity" 的元素还是具有该类名的元素的<input> 后代？您的选择器目前正在执行后者。
它的 jQuery('input.field-name-field-activity').change() 将选择所有具有类 field-name-field-activity 的输入元素

【解决方案1】：

使用 jquery 只需 change 即可：

$('.field-name-field-activity').change(function() {
  // your code here
});

编辑：

由于事件要绑定文本类型，更好的方法是使用input事件，如：

$('.field-name-field-activity').on('input', function() {
    // your code here
});

如果是文本字段，onchange 事件在某些浏览器上可能无法正常工作。

【讨论】：

【解决方案2】：

这是一个简单的语法错误试试这个jQuery('.field-name-field-activity :input').change(function() { //enter code here });

【讨论】：

【解决方案3】：

试试这样：

jQuery('.field-name-field-activity input').change(function() {
    //enter code here
});

【讨论】：

【解决方案4】：

关于性能，我建议不要使用 ":input"-Selector。

因为 :input 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 >:input 的查询无法利用原生 DOM >querySelectorAll() 方法提供的性能提升。

如果类名仅与输入元素相关，则只需使用 Ankit Jaiswal 建议的类选择器，因为单类选择器性能最佳。

【讨论】：

【解决方案5】：

试试这个 -

jQuery('.field-name-field-activity').on('change',function() {
    //enter code here
});

【讨论】：