javascript - remove - parent jquery

jQuery con elementos generados dinámicamente

Question

He estado trabajando con jQuery durante un par de semanas y me he dado cuenta de que funciona bien con objetos que están en el documento HTML original, pero cuando genero un elemento nuevo usando jQuery, la biblioteca no obtiene ninguno de sus eventos.

Digamos que trato de ejecutar algo como esto:

$(''.whatever'').click(function() {
  alert("ALERT!");
});

Si el HTML tiene algo como esto:

<span class="whatever">Whatever</span>

Luego, haciendo clic en la palabra Whatever me da una buena alerta.

Pero si el elemento span se agrega dinámicamente usando jQuery, no ocurre nada al hacer clic en él.

¿Hay alguna manera de hacer que jQuery funcione con esos elementos, de alguna manera?

Answer 1

Eso es porque: _(corregido)

$(''.whatever'').click(function() {
  alert("ALERT!");
});   

Significa, en términos literales:

Find all elements currently on the page that have the class ".whatever" Foreach element in that result set, bind this function to its click event

así que, naturalmente, agregar un nuevo elemento DOM no aplica automágicamente el clic.

la mejor manera de resolver esto es crear enlaces durante su fase de inserción, es decir:

  var x = document.createElement("span"); 
  $(x).click(function(){ });  //etc 
  $(somcontiner).append(x); 

Advertencia sobre simplemente volver a vincular todo

Si se hace incorrectamente, puede provocar efectos no deseados, es decir, aumentar el número de veces que el evento provoca algo. Para detener esto, es posible que deba desvincularlos primero para eliminar los enlaces de pases anteriores.

es decir,

$(x).click(foo); 
$(x).click(bar);  //foo and bar should both execute. 

así que para detener esto, necesitas

$(x).unbind("click");
$(x).click(foo); 

en el rebind.

Answer 2

Gracias a todos.

De alguna manera, pensé que JQuery añadía elementos al DOM automáticamente agregándolos a cualquier lugar.

También encontré información adicional sobre el tema:

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

http://learningjquery.com/2008/03/working-with-events-part-1

http://learningjquery.com/2008/05/working-with-events-part-2

Por si acaso alguien más lo necesita.

Answer 3

Además, hay un excelente complemento para jQuery que se encarga de esto, llamado livequery

Answer 4

Si tiene jQuery 1.3 o posterior, intente usar live para agregar eventos a elementos generados dinámicamente:

$(''.whatever'').live("click", function() {
  alert("ALERT!");
});

Answer 5

Tienes que volver a vincularlo.

function bindme(){
    $(''.whatever'').click(function(){
        alert(''binded'');
    });
};

bindme();

//function that will generate something

function foo(){
   $(''.whatever'').val(''oryt'');
   bindme();//rebind itagain
}

Answer 6

También vea reglib , una biblioteca similar que permite el estilo de programación que está buscando.