dispatchEvent不触发jQuery.on（）事件侦听器

我有下面的代码触发一个自定义命名的事件：dispatchEvent不触发jQuery.on（）事件侦听器

elem.addEventListener('click', function (event) 
{ 
    event.preventDefault(); 

    // Do some processing stuff 

    var event = new Event('custom_event'); 
    this.dispatchEvent(event); 
});

如果我试图抓住与jQuery.on（自定义事件）它的工作原理，但只有当我不使用后裔选择器过滤器。

所以此工程：

$('selector').on('custom_event', function() { // works });

但这并不：

$(document).on('custom_event', 'selector', function() { // doesn't work });

任何人都可以揭示这是为什么一些轻？这是一个显示问题的Fiddle。

来源

2014-10-17 Bogdan

当然，如果你已经使用jQuery，你可以使用'$（本）.trigger（ “CUSTOM_EVENT”）'，但我猜你有一个*理由*对于上面的直接DOM代码（可能是一个非jQuery库，你想与使用它的jQuery代码兼容？）。 – 2014-10-17 11:15:24

是的，正是这个原因:) – Bogdan 2014-10-17 11:21:07

不错的一个！ ..... – 2014-10-17 11:27:38

默认情况下，事件不会冒泡，因此当您创建事件时，您需要通过bubbles: true作为选项来指示您希望事件冒泡。您可以使用CustomEvent来做到这一点。

您正在使用事件委托来注册使用事件冒泡的第二个处理函数。

document.querySelectorAll('.button')[0].addEventListener('click', function(e) { 
 
    var event = new CustomEvent('custom_event', { 
 
    bubbles: true 
 
    }); 
 
    this.dispatchEvent(event); 
 
}); 
 

 
$(document).on('custom_event', '.button', function() { 
 
    alert('Custom event captured [selector filter]'); 
 
}); 
 

 
$('.button').on('custom_event', function() { 
 
    alert('Custom event captured'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="button">Click Me</button>

来源

2014-10-17 11:13:32

这清除了一切。非常感谢。 – Bogdan 2014-10-17 11:25:38

dispatchEvent不触发jQuery.on（）事件侦听器

回答

相关问题