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

Question

我的 DOM 中有包含名为“数据事件”的属性的元素。

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

我当然是通过这种方式使用 jQuery 访问元素的 data-event 属性：

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

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

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

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

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

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

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

我想知道是否有一种方法可以只使用一条指令/函数来完成我需要的工作，也许可以以某种“神奇”的方式使用.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);
  }

});

这是JSFiddle的链接