“$ (Document) .on” no se activa después de event.stopPropagation y “$ (a) .on” no se activa para nuevos elementos

Estoy tratando de escribir una extensión de Chrome (para pruebas de Casperjs). Una parte de la extensión debe vincularse al evento de click que estoy haciendo así:

 $(document).on('click', 'a', null, handler) 

Esto funciona muy bien para todos los enlaces, incluidos los elementos creados recientemente. El problema es que si un enlace tiene su propio controlador de click que llama al método event.stopPropagation() , entonces .on no .on el controlador.

La solución es unir a los elementos como este:

 $('a').on('click', null, null, handler) 

Esto funciona bien y activa el handler incluso si otro controlador de eventos llama al método event.stopPropagation() . El problema es que no funciona para elementos creados dinámicamente . Por lo tanto, cualquier nuevo elemento creado no activa el controlador.

Así que necesito algo que tenga la funcionalidad del método $(document).on que se activa para elementos creados dinámicamente, pero que también se activa independientemente del método event.stopPropagation() .

¿Algunas ideas?

¿Algunas ideas?

El manejo de eventos se divide en dos fases: fase de captura y fase de propagación :

  | | / \ -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |----------- | | |element2 \ / | | | | | -------------------------------- | | W3C event model | ------------------------------------------ 

Por defecto, los manejadores de eventos están obligados a escuchar la fase de propagación (los manejadores de eventos también están vinculados con jQuery).

Para reactjsr ante el evento antes de que se llame al controlador de eventos del elemento, debe vincular el controlador a la fase de captura. Tenga en cuenta que especialmente los navegadores IE más antiguos no admiten esto.

Ya que jQuery no te permite hacer esto, tienes que usar la API DOM directamente :

 document.addEventListener('click', function(event) { // test whether event originates inside  first // (search on SO to find out how) // then: handler.call(event.target, event); }, true); 
 document.addEventListener('click', function(event) { if (event.target.nodeName !== 'BUTTON') { return; } console.log('Called first.'); }, true); document.addEventListener('click', function(event) { if (event.target.nodeName !== 'BUTTON') { return; } console.log('Called last.'); }); document.querySelector('button').onclick = function(event) { console.log('Called in between (could cancel bubbling here)'); // event.stopPropagation(); };