带有可见选择器问题的.change（）方法

Question

我正在尝试为所有可见的选择元素设置一个更改方法。

$('.select_elements:visible').change(function() {
  // function
)};

当我更改select元素时，上面似乎没有运行。但是如果我写这个似乎有效。

$('.select_elements').change(function() {
  if ($(this).is(':visible')) {
    // function
  }
)};

任何人都能解释一下吗？我浪费了几年的时间......

Answer 1

不同之处在于，:visible位于选择器中的第一个版本仅将change事件处理程序附加到DOM 中可见的select元素。页面加载。

后一版本将事件处理程序附加到所有 select元素，然后在事件被触发时检查它们的可见性。

Answer 2

Rory McCrossan的回答是对正在发生的事情的一个很好的解释。我也在回答提出一个更高效的（至少在我看来）惯用解决方案，而不是检查更改处理程序中元素的可见性。

$(document).on('change', '.select_elements:visible', function () {
   // ...
});

此方法仅将单个更改处理程序附加到文档（您可以将其传递给.select_elements的任何父项），只要更改的元素与第二个参数中的选择器匹配，就会触发。由于该选择器是针对每个更改事件进行评估的，因此它还将触发在定义处理程序时不可见的可见元素。