Sto provando a eseguire alcune manipolazioni condizionali di elementi che vengono aggiunti dinamicamente a un contenitore in una pagina, ma mi manca un evento.jQuery sul carico dell'elemento dinamico

dire che ho un contenitore:

<div id="container"></div>

posso facilmente associare un gestore di eventi per la funzione di clic per tutti i nuovi elementi, utilizzando

$('#container').on('click', '.sub-element', function() { ... });

Ma che cosa mi legano al fine di ottenere un hook "una tantum" quando l'elemento viene aggiunto a #container. Ho provato a legare a ready e load inutilmente. C'è un modo per farlo, o devo trovare un'altra soluzione al mio problema?

This fiddle contains my non-working example.

fonte

2012-03-07 Klaus Byskov Pedersen

* In tutti i browser, l'evento di caricamento non bolle. In Internet Explorer 8 e versioni precedenti, gli eventi Incolla e Reimposta non vengono visualizzati. Tali eventi non sono supportati per l'uso con la delega, ma possono essere utilizzati quando il gestore eventi è direttamente collegato all'elemento che genera l'evento. * (Http://api.jquery.com/on/) Ora, come per sapere come aggirare il problema ... – Corbin

Potrebbe essere un problema rimuovere la funzionalità di "caricamento" che si sta tentando di realizzare tutti insieme e invece manipolare l'html dopo che l'elemento è stato aggiunto da "concatenamento"? $ ('# contenitore'). Append ('

No worky!

') .html ('yaay!'); – Ohgodwhy

@Ohgodwhy non è che non riesca a inventare un work-around (e ancora di più per questo stupido esempio), voglio solo sapere se c'è un evento che ho perso e che può essere usato allo scopo descrivendo. –

È possibile attivare un evento personalizzato sull'elemento DOM appena aggiunto che può essere prelevato da un gestore di eventi jQuery:

//bind to our custom event for the `.sub-element` elements 
$('#container').on('custom-update', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}); 

//append a new element to the container, 
//then select it, based on the knowledge that it is the last child of the container element, 
//and then trigger our custom event on the element 
$('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update');

Ecco una demo: http://jsfiddle.net/ggHh7/4/

Questo metodo consente di fare qualcosa a livello globale anche se carichi il contenuto dinamico con metodi diversi.

Aggiornamento

non sono sicuro del supporto del browser (darò per scontato IE8 e meno recenti non supportano questo), ma è possibile utilizzare l'evento DOMNodeInserted mutazione per rilevare quando si aggiunge un elemento DOM:

$('#container').on('DOMNodeInserted', '.sub-element', function(){ 
    $(this).html('<b>yaay!</b>'); 
}) 

$('#container').append('<div class="sub-element">No worky!</div>');

Ecco una demo: http://jsfiddle.net/ggHh7/7/

UPDATE

C'è una nuova API per Thi s come DOMNodeInserted è ammortizzato in questo momento. Non ho guardato in esso, ma si chiama MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

fonte

2012-03-07 22:55:18 Jasper

Interessante, +1 e tutto ... quindi stai dicendo che non c'è modo di essere avvisato quando alcuni plug-in di terze parti aggiungono un elemento a qualche contenitore. Se non sono io ad aggiungerlo, sono fregato? –

È possibile impostare un intervallo che controlli i nuovi elementi DOM ogni tanto. Altrimenti ci sono eventi di mutazione, 'DOMNodeInserted' è probabilmente quello che vuoi, ma il supporto del browser potrebbe non essere quello di cui hai bisogno: https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/DOM_Events (guarda la sezione 'Mutazione e mutazione nome tipi di eventi' sezione). Vedi il mio ** aggiornamento ** per un esempio di utilizzo di 'DOMNodeInserted'. – Jasper

È necessario utilizzare un metodo come Polling lungo per monitorare l'elemento per le variazioni di lunghezza, se la lunghezza cambia, quindi prendere la differenza di lunghezza. Questo ti darà qualsiasi cosa 'oggetto' risieda lì. È non convenzionale, ma funzionerà. – Ohgodwhy

Dopo aver letto la risposta di cui sopra io uso questo successo:

$('body').on({ 
    DOMNodeInserted : function(){ 
     alert('I have been added dynamically'); 
    }, 
    click : function(){ 
     alert('I was clicked'); 
    }, 
    '.dynamicElements' 
});

Ora tutta la mia dynamicElements può fare cose come sono caricati, utilizzando il impressionante mappa degli eventi .on().

fonte

2013-03-03 01:16:47 tim

jQuery sul carico dell'elemento dinamico

risposta

Aggiornamento

UPDATE

Problemi correlati