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

Question

我的DOM中包含一个名为'data-event'的属性。

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

我访问这样的元素的数据，事件属性与jQuery，当然：

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

事件数据属性包含一个功能处理程序必须要连接的事件的名称。假设这个函数被称为generalHandler（）。

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

我可以用。每次，为了访问每个$（“[数据事件]”），并提取事件名称和附加功能呢，一切从回调函数内通过调用。每。

使用.each，无论如何也不是一个好的解决方案，导致这种方式我没有处理所有动态添加的$（'[data-event]'）元素。

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

我想知道是否有一种方法可以只使用一个指令/函数来完成我需要的功能，可能是以某种“神奇”方式使用.on或类似的东西。我不想使用MutationObserver，因为我应该执行两次“事件附件”操作（一个用于现有元素，另一个用于动态元素），我不确定如何使用它以保持页面的最佳性能并且我不知道如何恰当地实现它，只做我需要的东西（找到事件名称并附上我的处理程序来处理这个元素）。

有什么想法？谢谢。

Answer 1

如果我理解正确。您希望根据元素的data属性中提供的事件执行操作，并且这些事件对于添加的每个元素都会有所不同。如果是这样，你可以尝试这样的事情。

<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