En jQuery, ¿cómo adjuntar eventos a elementos html dinámicos? [duplicar]

A veces hacer esto (la respuesta más votada) no siempre es suficiente:

$('body').on('click', 'a.myclass', function() {
    // do something
});

Esto puede ser un problema debido al orden en que se disparan los controladores de eventos. Si te encuentras haciendo esto, pero está causando problemas debido al orden en el que se maneja.. Siempre puede envolver eso en una función, que cuando se llama "refresca" el oyente.

Por ejemplo:

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }
}

Debido a que es una función, cada vez que configure mi oyente de esta manera, normalmente lo llamo en el documento listo:

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();
});

Luego, cada vez que agregue algún elemento agregado dinámicamente, llame a ese método nuevamente:

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();
}

Esperemos que esto ayude!

Saludos,

Después de jQuery 1.7 los métodos preferidos son .el () y .off()

La respuesta de Sean muestra un ejemplo.

Ahora en desuso:

Utilice las funciones de jQuery.live() y .die(). Disponible en jQuery 1.3.x

De los documentos:

Para mostrar el texto de cada párrafo en un cuadro de alerta cada vez que se hace clic:

$("p").live("click", function(){
  alert( $(this).text() );
});

Además, el plugin livequery hace esto y tiene soporte para más eventos.

Si está agregando una pila de anclas al DOM, busque en la delegación de eventos en su lugar.

Este es un ejemplo sencillo:

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

Vincula un controlador a un evento (como clic) para todos los elementos coincidentes actuales y futuros. También puede enlazar eventos personalizados.

Link text

$(function(){
    $(".myclass").live("click", function() {
        // do something
    });
});

Puede enlazar un evento de un solo clic a una página para todos los elementos, sin importar si ya están en esa página o si llegarán en algún momento futuro, así:

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

Lo he estado usando por un tiempo. Funciona como un encanto.

En jQuery 1.7 y versiones posteriores, se recomienda usar .on() en lugar de bind o cualquier otro método de delegación de eventos, pero .bind() todavía funciona.

Si está en jQuery 1.3+ entonces use . en vivo()

Enlaza un controlador a un evento (como click) para todos los actuales y futuros - elemento coincidente. También puede enlazar personalizado evento.

Desea utilizar la función live(). Véase los documentos.

Por ejemplo:

$("#anchor1").live("click", function() {
    $("#anchor1").append('<a class="myclass" href="#">test4</a>');
});