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（）事件偵聽器

回答

相關問題