appendto - ¿Hay un evento jquery que se activa cuando se inserta un nuevo nodo en el dom?

on change jquery

Question

¿Hay un evento en el que jquery dispara un elemento dom cuando se inserta en el dom?

Por ejemplo, digamos que cargué un poco de contenido a través de ajax y lo agregué al DOM y en otra parte de javascript pude agregar un evento usando .live () para que cuando un evento que coincide con un selector específico se agregue al DOM el evento se active dicho elemento. Similar a $ (document) .ready () pero en el contenido que se agrega al DOM dinámicamente.

Con lo que estoy soñando

$(''.myClass'').live(''ready'', function() {
    alert(''.myClass added to dom'');
});

Si jquery no es compatible con tal cosa, ¿hay otra forma de que pueda lograr esta funcionalidad sin modificar el código que realmente hace la manipulación dom inicial?

Answer 1

obsoleto : según el comentario de DOMNodeInserted continuación, el evento DOMNodeInserted está en desuso, y se eliminará de la web en algún momento desconocido en el futuro. Para obtener los mejores resultados, comience a aprender sobre la API MutationObserver .

ver la respuesta de @dain a below .

Si vincula el evento ''DOMNodeInserted'' al documento o al cuerpo directamente, se ejecutará cada vez que se inserte algo en cualquier lugar. Si desea que la devolución de llamada se ejecute solo cuando se agrega un tipo particular de elemento, sería aconsejable usar eventos delegados .

Por lo general, si agrega una clase de elementos al DOM, los agregará a un elemento primario común. Así que adjunte el controlador de eventos de esta manera:

$(''body'').on(''DOMNodeInserted'', ''#common-parent'', function(e) {
  if ($(e.target).attr(''class'') === ''myClass'') {
    console.log(''hit'');
  }
});

Básicamente es la misma respuesta que la anterior de Myke , pero como está utilizando un controlador de eventos delegado en lugar de un controlador de eventos directo, el código que se encuentra allí se activará con menos frecuencia.

NOTA:

$(''body'').on(''DOMNodeInserted'', ''.myClass'', function(e) {
  console.log(e.target);
});

Esto parece funcionar también ... pero no sé por qué.

Answer 2

Eche un vistazo a insertionQuery . Es una biblioteca interesante que usa CSS para detectar nuevos elementos. Debido a que usa CSS, no hay ningún golpe de rendimiento y se devuelven los elementos reales que coinciden con el selector.

Answer 3

El .livequery() todavía sirve esta necesidad de nicho, como esta:

$(''.myClass'').livequery(function() {
  alert(''.myClass added to dom'');
});

Si solo le pasa una función de devolución de llamada como la anterior, se ejecutará para cada elemento nuevo que encuentre, tanto inicialmente como a medida que se agreguen. Dentro de la función this refiere al elemento recién agregado.

.live() escucha los eventos que burbujean, por lo que no se ajusta a esta situación "cuando se agregan los elementos", en ese sentido, .livequery() (el complemento) no fue completamente reemplazado por la adición de .live() a núcleo, solo la parte de burbujeo del evento (en su mayor parte).

Answer 4

No hay evento jQuery, pero hay un evento DOM: DOMNodeInsertedIntoDocument. Puedes escuchar eventos DOM usando el método jQuery''s on. Asi que:

$(''.myClass'').on(''DOMNodeInsertedIntoDocument'', function() {
  alert(''myClass was inserted into the DOM'');
}

Esto puede ser preferible al uso de liveQuery ya que ese complemento está un poco pasado de moda (no hay actualizaciones por más de 2 años, solo promete soporte para jQuery 1.2.x).

Answer 5

Si vive a la vanguardia, puede usar MutationObserver :)

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var list = document.querySelector(''ol'');

  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
      if (mutation.type === ''childList'') {
        var list_values = [].slice.call(list.children)
            .map( function(node) { return node.innerHTML; })
            .filter( function(s) {
              if (s === ''<br>'') {
                return false;
              }
              else {
                return true;
              }
        });
        console.log(list_values);
      }
    });
  });

  observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true 
   });

Ver: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Editar: esta respuesta es bastante antigua, ahora todos los navegadores admiten MutationObserver, excepto Opera Mini: http://caniuse.com/#feat=mutationobserver

Además, aquí está el enlace directo de la API en MDN: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver