Wiring up click event utilizando jQuery on() no se activa en HTML inyectado a través de la llamada Ajax

Question

Tengo una vista parcial que se devuelve mediante una llamada Ajax con un tipo de datos html - dentro de este html hay una etiqueta ancla con un id , que estoy cableando un evento de clic usando la API de jQuery .on() y la versión 1.7.1 del framework.

Por el bien de la brevedad, imaginar la vista parcial es el siguiente:

<div id="container" class="modal-dialog"> 
    <h1>Heading</h1> 
    <a id="thelink" href="#"> 
     <img src="<%:Url.Content("~/Path/To/Image.jpg")%>" /></a> 
</div> 

..y a través de un $.ajax la POST estándar a una acción del controlador MVC que devuelve el anterior como resultado vista parcial, que interceptar y escupir en el diálogo modal.

El código de evento que estoy tratando de conectar un aspecto de la siguiente manera:

$(function() { 
    $("#thelink").on("click", function (e) { 
     e.preventDefault(); 
     $("#jquery-ui-dialog-box").dialog("close"); 
    }); 
}); 

Ahora, si me cambio la on() a live() - todo funciona como se esperaba. Sin embargo, con el código anterior en IE8 (modo Estándares IE8) el evento no se dispara, los puntos de interrupción no se activan, el modo de interfaz de usuario de jQuery no se cierra como en el ejemplo anterior. Sin embargo, con una llamada live(), todo funciona como se esperaba.

Esta es la primera y única vez que he visto un diferencial entre el comportamiento de activación() y la desaprobado o 'enrollado' la unión de sucesos de API (delegado, en vivo, se unen)

que no tengo Problemas con volver a usar live() o delegate() pero me gustaría entender por qué ocurre esto, si eso es posible.

Regards SB

Answer 1

$(foo).live(type, handler) es equivalente a $(document).on(type, foo, handler), a fin de tratar el siguiente lugar;

$(function() { 
    $(document).on("click", '#thelink', function (e) { 
     e.preventDefault(); 
     $("#jquery-ui-dialog-box").dialog("close"); 
    }); 
}); 

La firma de live() es confusa; en realidad no está vinculando un controlador a los elementos seleccionados, sino al elemento document, que escucha que se active un evento en un elemento que coincida con el selector dado (How does jQuery .live() work?).

$(foo).live(type, handler) es equivalente a $(document).delegate(foo, type, handler);

Para referencia futura, $(foo).delegate(selector, type, handler) se puede convertir a on() simplemente intercambiando los parámetros primero y segundo; on() espera el tipo de evento primero, luego el selector (opcional).