jQuery 1.7.1 on() no funciona mientras live() funciona

Tengo un fragmento de código simple

$('.box_tile_image').live('click', function() {
console.log('click');   
});

El problema es que quiero usar on() as live() está en desuso, sin embargo, si uso on en el caso anterior, no entiendo "clic", mientras que si reemplazo on con para vivir funciona como una brisa.

¿Cuál puede ser el problema?

preguntado el 03 de mayo de 12 a las 15:05

@TJCrowder gracias. La respuesta de Royi Namir fue más específica para usar MyWrapperElement en lugar de documento y fue el primero. Todavía voté su respuesta y me gustaría aceptar dos respuestas. ¡Gracias! -

@lukas: Nunca te preocupes por la respuesta que elijas, depende totalmente de ti. Hay algunos aquí en SO que intentarán intimidarte; no los dejes, no es su lugar. Me alegro de que mi respuesta haya ayudado. Mejor, -

3 Respuestas

el selector principal debe estar en un ELEMENTO ENVOLTORIO

$('#MyWrapperElement').on('click',".box_tile_image",function() {
console.log('click');   
});

contestado el 03 de mayo de 12 a las 15:05

El equivalente sería:

$(document).on('click', '.box_tile_image', function() {
    console.log('click');   
});

...y de hecho, si miras la fuente jQuery desde 1.7 en adelante, eso es todo live .

Ahora, dicho esto, recomiendo encarecidamente enganchar el clic en algo más cercano a los elementos de destino, en lugar de todo el camino hacia arriba en el document. Pero para un equivalente literal, si los elementos en cuestión realmente no tienen otro ancestro común, eso es lo que harías.

contestado el 03 de mayo de 12 a las 15:05

Esto parece natural. Gracias. Sin embargo, ¿por qué entonces la documentación de jQueyr on() tiene este ejemplo: $("#dataTable tbody tr").on("click", function(event){alert($(this).text());}); - lukas.pukenis

@lukas.pukenis: Eso es enganchar el evento directamente en el emparejamiento tr elementos, sin utilizar la delegación de eventos. on solo usa la delegación de eventos cuando proporciona un selector después del evento. - TJ Crowder

@lukas.pukenis: No se preocupe, me alegro de haber ayudado. Solo FWIW, la versión de delegación de eso sería $('#dataTable tbody').on('click', 'tr', ...) (enganchando el click al tbody) o $('#dataTable').on('click', 'tbody tr', ...) (enganchando el click al #dataTable). - TJ Crowder

¡Gracias! ¡Gente como tú realmente ayuda mucho y hace que sea el lugar TAN perfecto para recibir ayuda y consejos! - lukas.pukenis

@lukas.pukenis: ¡Gracias! Muy amable. - TJ Crowder

$(document).on('click', '.box_tile_image', function() {
    console.log('click');   
});

o puedes usar delegar()

$(document).delegate('.box_tile_image', 'click', function() {
    console.log('click');   
});

En lugar de document también puede utilizar cualquier antepasado de box_title_image.

Supongamos que tiene DOM como sigue:

<div id="container">
  <img class="box_tile_image" src="" alt="">
</div>

Entonces puedes escribir:

$('#container').on('click', '.box_tile_image', function() {
    console.log('click');   
});

or

$('#container').delegate('.box_tile_image', 'click', function() {
    console.log('click');   
});

contestado el 03 de mayo de 12 a las 15:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.