Event bubbling difference between Dojo & jQuery
the Dojo framework does not cater for event bubbling when elements are not in the DOM. jQuery does. Irritating.
by steveukx
HTML
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<p>test</p>
JavaScript
require(['dojo/on', 'dojo/query'], function (on, query) {
var ul = document.createElement('ul');
'aaa bbb ccc ddd'.split(' ').forEach(function(text) {
var li = document.createElement('li');
li.innerHTML = text;
on(li, 'click', function(e) {
console.log('dojo explicit handler', e);
});
ul.appendChild(li);
});
on(ul, 'li:click', function(e) {
console.log('dojo delegate handler', e)
});
query('li', ul).forEach(function(li) {
console.log('dojo faking click on ' + li);
on.emit(li, 'click', {bubbles: true});
});
});
(function () {
var ul = jQuery('<ul />')
'aaa bbb ccc ddd'.split(' ').forEach(function(text) {
var li = jQuery('<li />').html(text);
li.on('click', function(e) {
console.log('jQuery explicit handler', e);
});
ul.append(li);
});
ul.on('click', 'li', function(e) {
console.log('jQuery delegate handler', e)
});
ul.find('li').each(function(index, li) {
console.log('jQuery faking click on ' + li);
jQuery(li).click();
});
}());