O jQuery $ el.trigger ('change') não dispara ouvintes nativos
Considere o seguinte HTML:
<select value="val2">
<option value="val1">o1</option>
<option value="val2">o2</option>
</select>
E JavaScript (realizado no documento pronto):
var $select = $('select');
var select = $select.get(0);
function logger(msg) {
return function () { console.log(msg); };
}
$select.on('change', logger('jquery on select'));
$(document).on('change', logger('jquery on document'));
select.addEventListener('change', logger('native on select'), false);
document.addEventListener('change', logger('native on document'), false);
setTimeout(function () {
console.log(' == programmatic ==');
$select.trigger('change');
console.log(' == now try manual ==');
}, 1000);
Isso resulta na seguinte saída no console:
== programmatic ==
jquery on select
jquery on document
== now try manual ==
jquery on select
native on select
jquery on document
native on document
A pergunta é: por que os ouvintes ligados nativamente não são chamados? Como fazê-los ser chamados?
Aqui também está um jsFiddle:http://jsfiddle.net/PVJcf/
(Usando o jQuery 2.0.2)