[phate72Partecipante]

Ciao
Sono un programmatore per Hobby e sto usando jquery per creare uno script lato Client.
Non riesco a modificare elementi del DOM che vengono caricati dinamicamente, o meglio ci riesco ma in un modo a dir poco barbaro.
Nella pagina ho questo codice HTML:

< div id="position7" >
< a id="Position7Link" href="http://pippo.com/index.php" onclick="ajaxHandlerCall(this.href);return false;" >< /a >
< /div >

cliccando sopra vengono inseriti nuovi elementi HTML, dove a sua volta c’è un altro pulsante:

< div id="tabSendTransporter" >
< div class="contentBox" >
< div >
< ul >
< li id="js_pippo" >
< a id="js_pippoLink" href="http://pippo2/index.php?view" onclick="ajaxHandlerCall(this.href);return false;" >
< div class="boxPippo" >
< div id="js_cityBoxCoordsPippo" >22:11< /div >
< div class="name" >
< /div >
< /a >
< /li >
< /ul >
< /div >
< /div >
< /div >

cliccando di nuovo sopra questo ultimo pulsante si apre la parte del DOM che vorrei modificare:

< div id="transport_c" >
< div id="transport" >
< div id="pippoT" class="hd header mainHeader draggable" >
< div class="pippoContentScroll" >
< /div >
< /div >

Questa è la mia soluzione barbara:

$(window).load(function()
{
$('body').click(function() {setTimeout(TransportSet,1000)});
}
function TransportSet()
if ($('#transport').length>0)
{
if ($('#Btn0').length==0)
{
$('#pippoT').append('')
}
// stile bottoni apertura/chiusura sezioni
$('div.closeTrans').css({'position':'relative','background':'url("/e.png") no-repeat scroll -54px -1px transparent'});
$('div.openTrans').css({'position':'relative','background':'url("/e.png") no-repeat scroll -36px -1px transparent'});
}
}

In pratica ogni volta che clicco nella pagina dopo 1 secondo viene lanciata la funzione che controlla l’esistenza del DOM da modificare.
Detto tutto questo, mi chiedo se c’e (impossibile che non ci sia) una soluzione migliore?
Ho fatto molti tentativi ma con nessun risultato ne riporto qualcuno:

// tentativo di intercettare il caricamento nodo
$("body").on('load', '#transport', function() {TransportSet()});
// tentativo di intercettare l'evento click
$("body").on('click', '#js_pippoLink', function() {setTimeout(TransportSet,1000)});

Per me la soluzione migliore sarebbe intercettare il caricamento del DOM che devo modificare ma non riesco a capire se è possibile farlo!!!
Grazie a chiunque sappia aiutarmi o consigliarmi
Mauro

[jqueryitaliaAmministratore]

Ciao phate72 e benvenuto!

Intanto una nota (che vale per te, ma anche per tutti gli utenti del forum): EVITATE DI INSERIRE TAG HTML DI QUALSIASI TIPO all’interno del post, anche se all’interno del tag BBCode ‘code’.
Questo perchè in ogni caso i tag html vengono convertiti e non si riesce quindi a distinguere quanto avete inserito.

Ritornando al tuo problema: con quel poco che sono riuscito a decifrare dal tuo post ho buttato giù un’esempio che, con la chiamata .on() di jQuery, FUNZIONA correttamente! (L’esempio è visibile qui: https://www.jqueryitalia.org/tutorials/dinamicHTML.html).

Personalmente eseguire la chiamata ajaxHandlerCall() a me non piac e molto: preferisco una chiamata ajax() standard che appenda o sostituisca il contenuto della pagina con quello che è necessario inserire.

Fammi sapere se nell’esempio ho sbagliato qualcosa o se posso eserti d’aiuto in altro modo. 🙂

[phate72Partecipante]

Scusa per il post cervellotico ed il codice HTML in seguito eviterò di inserirlo.
Grazie per la risposta.
Il mio problema è l’uso di setTimeOut in quanto il caricamento dei dati necessari al mio script, possono essere caricati in 100ms come in 10sec.
Io chiedevo se era possibile avviare una funzione alla comparsa di uno specifico HTML nella pagina (penso di sapere purtroppo già la risposta: ‘NO’).
In pratica se compare nella pagina un elemento con ID ‘pippo’ allora esegui la funzione modificaPippo().
La pagina che voglio modificare usa degli script per aprire e chiudere nuove sezioni nella pagina e io dovrei modificare queste parti del codice HTML. Io non posso in alcun modo richiedere al server dati (fare chiamate ajax).
Nel frattempo ho trovato una soluzione più efficace della precedente, anche se non è il massimo della leggerezza. Ho notato che nella pagina, esiste un div con ID ‘LoadingProgress’, questo nodo viene visualizzato tutte le volte che vengono caricati i dati. Ho sfruttato questo per controllare ad ogni evento la fine del caricamento.

// eventi
var ET_loading,nEvent=[];
$('#locations a').click(function() {
nEvent.push(1);
setEvent()
});
$('#locations a[href*=transport]').click(function()
{
nEvent.push(2);
setEvent()
});
function setEvent()
{
clearInterval(ET_loading);
if(nEvent.length>0) ET_loading = setInterval(mainEvent,500,nEvent);
}
function mainEvent()
{
if ($('#loadingPreview').css('display')=='none')
{
clearInterval(ET_loading);
if ($.inArray(1,nEvent)>=0) funzione1()
if ($.inArray(2,nEvent)>=0) funzione2()
nEvent=[] //resetto eventi
}
}


Può essere una buona soluzione?

[Autore]

Post