¿Cómo activo manualmente un evento delegado con jQuery?

Question

¿Hay alguna manera con jQuery de activar manualmente un controlador de eventos delegados?

tomar el código siguiente ejemplo:

<div class="container"> 
    <input type="button" value="Hello"> 
    <span class="output"></span> 
</div> 
​ 
<script> 
    $('.container') 
    .on('click', '[type=button]', function(e) { 
     $(e.delegateTarget).find('.output').text($(this).val()); 
    }) 
    .find('[type=button]').triggerHandler('click');​ 
</script> 

(línea: http://jsfiddle.net/TcHBE/)

que estaba esperando que esto funcionaría, y el texto "Hola" aparecería en el lapso sin tener que hacer clic en el botón, pero no es así

estoy usando e.delegateTarget dentro del controlador, ya que el elemento .ouput no estará en una relación conocida con el botón, aparte de algún lugar dentro de la .container. Es por eso que estoy usando un controlador de eventos delegados en primer lugar.

Actualización:

También estoy usando triggerHandler, debido a que el evento tiene un comportamiento por defecto en el código real que no quiero para disparar. (En el código real, el evento es el evento personalizado hide del Bootstrap Modal plugin, pero en realidad no quiero ocultar el modal al activar el controlador de eventos en la carga de la página).

Podría extraer el controlador en una función nombrada y llamarlo directamente, pero debido al uso de e.delegateTarget, eso complicaría la construcción de cómo.

Answer 1

Puede crear un objeto de evento manualmente y establecer la propiedad target en consecuencia para engañar a jQuery y hacerle creer que el evento se ha borrado.

var c = $('#container'); 

c.on('click', '[type=button]', function(e) { 
    $(e.delegateTarget).find('span').text($(this).val()); 
}); 

var event = jQuery.Event('click'); 
event.target = c.find('[type=button]')[0]; 

c.trigger(event); 

http://jsfiddle.net/PCLFx/

Answer 2

selectores en el método .on() son opcionales.
Cuando se escribe:

$('.container') 
    .on('click', '[type=button]', function(e) { 
     $(e.delegateTarget).find('.output').text($(this).val()); 
    }) 
    .find('[type=button]').triggerHandler('click');​ 

le está diciendo al controlador de eventos para escuchar sólo el botón de clic dentro del contenedor.
$(e.delegateTarget) es solo una referencia al contenedor externo.

He actualizado your fiddle to echo this.

Esta es una cita from the API:

Cuando se proporciona un selector, el controlador de eventos se refiere como delegado. No se llama al controlador cuando el evento ocurre directamente en el elemento vinculado, pero solo para descendientes (elementos internos) que coinciden con el selector. jQuery hace burbujear el evento desde el objetivo del evento hasta hasta el elemento donde está conectado el controlador (es decir, el más interno al elemento más externo ) y ejecuta el controlador para cualquier elemento a lo largo de esa ruta que coincida con el selector.