Question

我想运行一个简单的函数，但我认为存在委托问题。

在页面加载后，我会动态地向现有元素添加一个类。（$(elemen).addClass('myclass-123');）

现在，我想在检测该元素是否已调整大小或滚动的函数中使用此元素。

如果我使用已经具有该类的元素运行此代码，则一切正常。

如果以后再添加一个类，则此元素将不起作用，因此我认为这是函数和元素的委派的问题，但我不知道该如何解决。

$(window).on('resize scroll', function() {
   console.log("check number of elements on page: "+$("[class^='myclass-']").length);
   $("[class^='myclass-']").each(function() {... do something with the elements });
});

Answer 1

这不是事件委托问题，因为只要在resize或scroll事件触发时它们都具有类，就可以选择它们。

问题是因为选择器依赖于myclass作为属性中的第一个，例如class="myclass foo"，但是如果稍后添加类，它将位于属性的末尾，例如class="foo myclass"，因此属性选择器将找不到它。您可以在DOM检查器中确认这一点。

要修复此问题，请使用filter()来查找元素中具有以myclass-开头的任何类的元素：

$(window).on('resize scroll', function() {
  $('[class*="myclass-"]').filter(function() {
    return this.classList.some(c => c.indexOf('myclass-') == 0);
  }).each(function() {
    // do something with the elements 
  });
});

请注意，如果您向所有元素添加单个类而不是带前缀的动态类，则可以简化上述操作。

如何委派此功能

1 个答案: