javascript - event - Método jQuery on() en múltiples selectores

listen jquery event

Question

Dado que la versión 1.7 en live está en desuso.

El siguiente ejemplo es fácil de hacer compatible con el nuevo método:

$(''nav li, #sb-nav li, #help li'').live(''click'', function () {
    // code...
});

Usando on :

$(''nav, #sb-nav, #help'').on(''click'', ''li'', function () {
    // code...
});

¿Cómo reescribir el siguiente ejemplo usando on ?

 $(''#header .fixed-feedback-bn, #sb-sec .feedback-bn'').live(''click'', function () {
     // code...
 });

Answer 1

Es posible que desee echar un vistazo a la documentación de live (), el cambio a on () está documentado: http://api.jquery.com/live/

Answer 2

Si está tratando de usar .on() para poder escuchar los eventos en el objeto DOM que pueden crearse después de realizar la .on() inicial .on() , entonces la forma más eficiente de hacerlo es encontrar un padre existente objeto que no va y viene y que puede vincular a los oyentes del evento hasta ahora.

.live() pone a todos los oyentes en el objeto de documento (el principal maestro) y puede ser bastante ineficiente si tiene muchos oyentes.

.on() permite especificar cuál será el objeto principal de manera más eficiente. Entonces, si quiere poner todos estos manejadores de eventos en una sola declaración y estos ''#header .fixed-feedback-bn, # sb-sec .feedback-bn'' no tienen un padre común, entonces tendría que especificar documento como ese padre como Greg ha escrito.

Pero, una forma más eficiente de hacer esto sería romper esto de acuerdo a la necesidad. Para los elementos que no tienen una necesidad dinámica, simplemente conéctelos directamente a ese elemento. Por ejemplo, si #header y # sb-sec no entran / salen y no necesita un comportamiento dinámico, puede encontrarlo directamente así:

$(''#header, #sb-sec'').on(''click'', function() {
    // code here
});

Y, para los elementos que necesita un comportamiento dinámico, elija un elemento primario común apropiado y conéctelo de esta manera utilizando el elemento primario común como punto de captura para los eventos y el selector como el filtro para qué subelementos desea que el evento se active para:

$(''#feedback'').on(''click'', ''.feedback-bn, .fixed-feedback-bn'', function() {
    // code here
});

Answer 3

cambiado $ (''documento'') a $ (documento) por comentario

$(document).on(''click'', ''#header .fixed-feedback-bn, #sb-sec .feedback-bn'', function () {
     // code...
 });

.live() es solo documento vinculante como oyente.

Mi granito de arena es que casi siempre puedes encontrar un mejor oyente que un document . Como mínimo, casi todas las páginas usan un contenedor de contenido principal. Esto elimina los nodos en el encabezado, el pie de página y, a veces, las barras laterales como oyentes.

La mejor forma de utilizar .on como función delegante es identificar el ancestro común más cercano que se espera que nunca se destruya o, de lo contrario, tener eventos sin consolidar. Por ejemplo, si tiene un formulario que se actualiza y modifica mediante solicitudes ajax, el oyente podría ser el nodo de formulario en sí (si solo se actualizan los contenidos del formulario) o un elemento de contenedor (generalmente un div) que rodea el formulario. Si tal div no está allí, siempre puedes agregarlo, o podrías simplemente subir al árbol al próximo ancestro.

[editado para agregar:]

En el código de ejemplo específico proporcionado, es difícil decir si hay un mejor oyente que contendrá tanto #header como también #sb-sec . Pero imaginando que estas cosas comparten un antecesor con el ID "mainContainer", su código más eficiente simplemente cambia el oyente:

$(''#mainContainer'').on(''click'', ''#header .fixed-feedback-bn, #sb-sec .feedback-bn'', function () {
   // code...
});