Método jQuery on() en varios selectores

Question

Desde la versión 1.7 live está obsoleto.

Siguiendo el ejemplo es fácil de hacer compatible con el nuevo método on:

$('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 siguiente ejemplo usando on?

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

Answer 1

cambió $ ('documento') a $ (document) por comentario

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

.live() solamente es obligatorio documento como oyente.

Mis dos centavos son que casi siempre puedes encontrar un mejor oyente que 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 manera de utilizar .on como función de delegación 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 añadir:]

En el código de ejemplo proporcionado en particular, es difícil decir si hay un mejor oyente que contendría tanto #header y también #sb-sec. Pero imaginar que estas cosas comparten un ancestro con el id "mainContainer", el código sea más eficiente simplemente intercambia a cabo el oyente:

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

Answer 2

Si usted está tratando de utilizar .on() de manera que se puede escuchar a los eventos en el objeto DOM que se puede crear después de realizar la llamada inicial .on(), entonces la forma más eficiente de hacerlo es encontrar un objeto principal existente que no vaya y vuelva, y puede vincular los detectores de eventos hasta ahora.

.live() pon a todos los oyentes en el objeto de documento (el principal maestro) y podría ser bastante ineficiente si tienes muchos oyentes.

.on() le permite especificar cuál será el objeto principal más eficientemente. 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 dividir esto según las necesidades. 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 viene/ir y no necesita comportamiento dinámico, sólo puede encontrar directamente a él de esta manera:

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

Y, para los elementos que necesita un poco de dinámica comportamiento, recoger un padre común adecuado y gancho en que al igual que esta utilizando el padre común como el punto de intersección de los eventos y el selector como el filtro para los que subelementos desea que el evento al fuego para:

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

Answer 3

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