jQuery Función On para elementos futuros?

Question

$("#dataTable tbody").on("click", "tr", function(event){ 
    alert($(this).text()); 
}); 

esta sintaxis es para tr que ya están en la página?

y, en caso negativo, ¿cuál es la sintaxis de los elementos de future tr?

Answer 1

Para elementos futuros dentro de #dataTable tbody, su código debería funcionar. Para delegar el clic de todo el camino hasta el documento, permitiendo que el mismo controlador para el futuro <tr> en cualquier lugar de la página, pruebe:

$(document).on("click", "tr", function(event){ 
    alert($(this).text()); 
}); 

Answer 2

Usted tiene que usar jQuery DE .live() para futuros elementos

incorrecto, ya que esto es jQuery 1.7 (y yo era ayunar en la publicación de mi respuesta).

.on() funciona para todos los elementos (futuros).

Answer 3

Esto manejará todos <tr> s, sin importar cuándo fueron creados, pero solo dentro del #dataTable tbody actualmente existente.
Es equivalente a .delegate.

Answer 4

De api.jquery.com/on/

El .on() método concede controladores de eventos a la seleccionada actualmente fijado de elementos en el objeto jQuery. A partir de jQuery 1.7, el método .on() proporciona toda la funcionalidad necesaria para adjuntar manejadores de eventos. Para ayuda en la conversión desde métodos de evento jQuery más antiguos, consulte .bind(), .delegate() y .live(). Para eliminar eventos enlazados con .on(), vea .off(). Para adjuntar un evento que se ejecuta sólo una vez y luego elimina sí mismo, ver .one()

y desde api.jquery.com/live/

Como de jQuery 1.7, es obsoleto el método .live(). Utilice .on() para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() con preferencia a .live().

Answer 5

Agregando a Davids respuesta aceptada, también se puede utilizar esta solución para enlazar varios eventos a un selector así como todos los elementos coincidentes futuros.

Por ejemplo, un elemento de entrada.

$(document).on({ 
    focus:function(){ 
     alert($(this).val()); 
    }, 
    blur: function(){ 
     alert($(this).val()); 
    } 
}, 'input[type=text]');