problema con el delegado de jquery y cambie el evento

Question

Me gustaría utilizar la función de delegado con mi evento de cambio de archivo, pero no estoy teniendo suerte. Aquí es lo que estoy tratando de hacer:

$("#file").delegate("change", function() {  
    $("#submit_form").trigger('click'); 
}); 

Mi evento de cambio no está siendo llamado ... Me estoy perdiendo algo o no puede usar delegado con un evento de cambio?

Answer 1

.delegate() requiere un selector que represente el elemento seleccionado.

$("#file").delegate('.selector_of_element_to_watch', "change", function() {  
    $("#submit_form").trigger('click'); 
}); 

Si el elemento #file es el que debe desencadenar el evento de cambio, entonces no utilice .delegate.

$("#file").bind("change", function() {  
    $("#submit_form").trigger('click'); 
}); 

---

La razón de esto es que un delegado manejador se coloca en un ancestro del elemento que debe activar el evento. A continuación, proporciona un selector de ese elemento.

Eventos en la página bubble. Eso significa que el evento se propagará desde el elemento que realmente desencadenó el evento, hasta el window, intentando activar un controlador en cada elemento en el camino.

Cuando se llega al ancestro al que enlazó el controlador delegado, probará el evento para ver si el elemento que originalmente activó el evento coincide con el selector. Si es así, ejecutará su código. Si no, nada sucederá.

---

La forma de hacerlo delegación de eventos en jQuery 1.7 o temprano es utilizar el método on.

Este método le permite enlazar directamente al elemento o proporcionar un selector para la delegación.

Así, por delegación:

$("#file").on("change", '.selector_of_element_to_watch', function() { 
     // Run if a descendant of '#file' that matches the selector 
     // '.selector_of_element_to_watch' triggered the event 
    $("#submit_form").trigger('click'); 
}); 

O para la unión directa:

$("#file").on("change", function() { 
     // Run if '#file' itself, or ANY of its descendants triggered the event 
    $("#submit_form").trigger('click'); 
}); 

(Sin saber qué tipo de elemento #file Es decir, es posible que no/no puede tener descendencia . Si ese es el caso, entonces obviamente la delegación de eventos no es la solución adecuada.)

Esto es mejoró en su antigua API de bind/live/delegate, y debería haber sido como se hizo desde el principio.