如何使用事件委托的jQuery过滤功能？

Question

我需要绑定Box2列下所有文本框（包含类.box）的更改，这些文本框的行中有蓝色按钮（在某些情况下具有动态的.blue类）。 / p>

下面是我所拥有的HTML的屏幕截图，它只是一个包含3列的HTML表格（Box1，Box2＆amp; for the button）：

类.blue可能出现在页面加载和放大器上的某些按钮上。也可以作为另一个Ajax操作的结果删除/添加到按钮。

jQuery .on()有 .on( events [, selector ] [, data ], handler ) 是否可以在选择器部分使用.filter()，我可以使用像

这样的函数

jQuery('.box').filter(function(){
       return jQuery(this).closest('tr').find('.blue').length
    });

过滤掉所需的文本框＆amp;然后绑定那里改变事件？

考虑#parent是我正在尝试的HTML的父div

jQuery('#parent').on('change','.box',..);但是这会听取所有box2元素的更改，而我希望它只听取特定的元素。

想法好吗？

感谢。

Answer 1

使用if测试按钮（.box）是否具有蓝色类

$('.parent').on('change','.box2 input',function(){
    if($(this).closest('tr').find('.box').is('.blue')) {
      //do code here
   }
});

Answer 2

包含对按钮的单独检查。没有任何代码，就无法为您提供正确的代码

jQuery('#parent').on('change','.box',..);
  if ($(this).next().hasClass('blue')) {
    // Do other stuff
  }

Answer 3

  

在事件委托中，我们根据目标（selector）绑定父元素上的事件和侦听事件。我们唯一确定的是target-element的specific-selector。好吧，在动态附加元素的链接specific-child或specific-sibling的情况下，在处理程序（回调）中执行操作是唯一的方法！

委派事件 的优势在于，他们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

注意：在文档树顶部附近附加许多委派事件处理程序会降低性能。每次事件发生时，jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为获得最佳性能，请将文档位置的委派事件尽可能靠近目标元素。避免过度使用文档或document.body来处理大型文档上的委托事件。 [Reference]