如何使用 jQuery 将动态命名的事件附加到动态元素

Question

我的 DOM 中有元素包含一个名为 'data-event'.

的属性

其中一些元素可能会动态添加到 DOM，例如在 ajax 请求之后。

当然，我正在使用 jQuery 访问元素的数据事件属性：

$('.element-selector').data('event')

事件数据属性包含必须附加函数处理程序的事件的名称。假设此函数称为 generalHandler().

我不能直接使用 .on 函数，因为在访问元素本身之前我不知道附加该函数的事件的名称，而 .on 需要指定事件的名称首先（当然）。

$('[data-event]').on('????', generalHandler);

我可以使用 .each，以便访问每个 $('[data-event]') 并提取事件名称并将函数附加到它，所有这些都来自 .each 调用的回调函数。

无论如何，使用 .each 也不是一个好的解决方案，因为这样我就不会处理所有动态添加的 $('[data-event]') 元素。

我可以使用 DOM 元素插入事件，将其附加到正文并等待 [data-event] 元素添加到 DOM，但我知道这些事件已被弃用。我可以扩展 MutationObserver 对象，但我对这种方式的性能编码一无所知。

我想知道是否有一种方法可以仅使用一个 instruction/function 来完成我需要的操作，也许可以以某种“神奇”的方式使用 .on 或类似的方法。我不想使用 MutationObserver 因为我应该执行两次“事件附件”操作（一次用于现有元素，另一次用于动态元素），我不确定如何使用它来保持最佳状态页面的性能，我不知道如何正确地实现它以仅做我需要的事情（找到事件名称并将我的处理程序附加到该元素）。

有什么想法吗？

Answer 1

如果我没理解错的话。您想要根据元素的数据属性中提供的事件执行操作，并且这些事件对于添加的每个元素都是不同的。如果是这样，你可以尝试这样的事情。

<div class="container">

</div>

$(".container")
.append("<div data-event='click' class='child'>Click</div>")
.append('<div data-event="mouseover" class="child">Mouseover</div>')
.append('<div data-event="mouseout" class="child">Mouseout</div>');

// Listen to all the possible event that can be triggered
$(".container").on("click mouseover mouseout", ".child", function(e){

    // If the required event was triggered for this element then perform the action
    if(e.type === $(this).data("event")){
    console.log("Perform " + e.type);
  } else{
    console.log("Don't Perform " + e.type);
  }

});

这是 link 到 JSFiddle

如何使用 jQuery 将动态命名的事件附加到动态元素

How to attach dynamically named events to dynamic elements with jQuery

jquery

mutation-observers

jquery-on

jquery-events