que - obtener contenido de un div javascript

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

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Enlace de eventos en elementos creados dinámicamente? 23 respuestas

Supongamos que tengo algún código jQuery que adjunta un controlador de eventos a todos los elementos con la clase "myclass". Por ejemplo:

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

Y mi html podría ser el siguiente:

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

Eso funciona sin problema. Sin embargo, considere si los elementos de "myclass" se escribieron en la página en algún momento futuro.

Por ejemplo:

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append(''<a class="myclass" href="#">test4</a>'');
    });
});
</script>

En este caso, el enlace "test4" se crea cuando un usuario hace clic en un # anchor1.

El enlace "test4" no tiene asociado el controlador click (), a pesar de que tiene class = "myclass".

¿Alguna idea de cómo puedo arreglar esto?

Básicamente, me gustaría escribir el controlador de clic () una vez y hacer que se aplique tanto al contenido presente en la carga de la página como al contenido que se incorporará más adelante a través de Ajax / DHTML.

Answer 1

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 activan los controladores de eventos. Si se encuentra haciendo esto, pero está causando problemas debido al orden en el que se maneja ... Siempre puede incluir eso en una función, que cuando se le llama "actualiza" al 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, siempre que configuro mi escucha de esta manera, normalmente la 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 un elemento agregado dinámicamente, vuelva a llamar a ese método:

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,

Answer 2

Después de jQuery 1.7, los métodos preferidos son http://api.jquery.com/on/ y .off()

La respuesta de Sean muestra un ejemplo.

Ahora en desuso:

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

De la documentación:

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 complemento livequery hace esto y tiene soporte para más eventos.

Answer 3

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

.live()

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

Answer 4

Estoy agregando una nueva respuesta para reflejar los cambios en versiones posteriores de jQuery. El método .live () está en desuso a partir de jQuery 1.7.

Desde http://api.jquery.com/live/

A partir de jQuery 1.7, el método .live () está en desuso. Utilice .on () para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en lugar de .live ().

Para jQuery 1.7+, puede adjuntar un controlador de eventos a un elemento padre utilizando .on (), y pasar un selector combinado con ''myclass'' como argumento.

Ver http://api.jquery.com/on/

Así que en lugar de ...

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

Puedes escribir...

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

Esto funcionará para todas las etiquetas con ''myclass'' en el cuerpo, ya sea presente o agregado dinámicamente más tarde.

La etiqueta del cuerpo se usa aquí ya que el ejemplo no tenía una etiqueta circundante estática más cercana, pero funcionará cualquier etiqueta principal que exista cuando ocurra la llamada al método .on. Por ejemplo, una etiqueta ul para una lista a la que se agregarán elementos dinámicos se vería así:

$(''ul'').on(''click'', ''li'', function() {
    alert( $(this).text() );
});

Mientras exista la etiqueta ul, esto funcionará (no es necesario que todavía existan elementos li).

Answer 5

Puede vincular 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 en el futuro, por ejemplo:

$(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 de maravilla.

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

Answer 6

Quieres usar la función live() . Ver .live() .

Por ejemplo:

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

Answer 7

Si está agregando un montón de anclajes al DOM, busque la delegación de eventos en su lugar.

Aquí hay un ejemplo simple:

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

Answer 8

Si estás en jQuery 1.3+, utiliza. .live()

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