Problemas de vinculación de eventos a elementos creados dinámicamente con jQuery.

Question

$.each(data, function(i,data) {
...[cut]...
    +"<a id=\"contact_"+data.id+"_delete\" href=\"/user/contact/delete/ticket_id/"+data.ticket_id+"/contact_id/"+data.id+"\">Delete</a>"
...[cut]...
    $("#contact_"+data.id+"_delete").live('click',function() {
        var href = this.attr('href');
        alert(href);
        return false;
    });

Tengo la siguiente muestra de código (piezas irrelevantes cortadas por simplicidad).Lo que tengo es una función que redita las filas (TR) de una tabla.Cada fila tiene un enlace 'Eliminar' al final de la fila que llama una URL / usuario / contacto / eliminar / ticket_id / {$ ticket_id}

Luego (dentro del mismo bucle), quiero enlazar un evento de clic al enlace recién creado.Sin embargo, cuando hago clic en el enlace, el navegador sale de la página y va a la URL en lugar de ir a la función de enlace haciendo clic.

Primero, ¿estoy vinculando el evento CLICT correctamente?

segundo, ¿estoy recuperando el atributo 'href' del elemento correctamente?

Answer 1

Además de lo que dice @charlietfl, podría tener un solo controlador para todos sus elementos de eliminación.Simplemente agregue la misma clase a todos, como class="contact_delete", y luego use .on() para apuntar a todos:

+'<a class="contact_delete" id="contact_'+data.id+'_delete" ...

Tenga en cuenta que si usa comillas simples, no tiene que escapar de todas sus comillas dobles.

$('body').on('click', '.contact_delete', function() {
    var href = $(this).attr('href');
    alert(href);
    return false;
});

Answer 2

Necesitas envolver "esto" en $ () para que sea un objeto jQuery para usar los métodos de jquery

 var href = $(this).attr('href');

Live () está en desuso (pero trabajando en 1.7.1) por lo que debe considerar el método más actualizado en ()