Question

我的DOM中包含一个名为＆＃39; data-event＆＃39;的属性。

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

我以这种方式使用jQuery访问元素的数据事件属性，当然：

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

event data属性包含必须附加函数处理程序的事件的名称。让我们说这个函数叫做generalHandler（）。

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

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

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

使用.each，无论如何，也不是一个好的解决方案，因此我没有处理所有动态添加的$（＆＃39; [data-event]＆＃39;）元素。

我可以使用DOM元素插入事件，将它附加到正文并等待添加到DOM的[data-event]元素，但我知道这些事件已被弃用。我可以扩展MutationObserver对象，但我不知道有关性能编码的任何信息。

我想知道是否有一种方法可以使用一个指令/功能来完成我需要的操作，也许可以在某些＆＃34;魔法＆＃34;中使用.on。方式，或类似的东西。我不想使用MutationObserver因为我应该做＆＃34;事件附件＆＃34;操作两次（一个用于现有元素，另一个用于动态元素），我不确定如何使用它来保持页面的最佳性能，我不确切知道如何正确实现它只做我需要的东西（找到事件名称，并为我的元素附加我的处理程序）。

有什么想法吗？谢谢。

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

的链接

如何使用jQuery

1 个答案: