[JQUERY] evento su elemento <a> forse intercettato da un altro listener

[robynosse]

Ciao a tutti,

sto impazzendo con una problematica abbastanza urgente:

ho un elemento html <a href="?mappa=italia.gif&immagine=12"> su cui ho registrato un listener:

$('area[href^="?mappa="],a[href^="?mappa="]').on("click",function(event){ 
        event.preventDefault(); 
                console.log("ok");         
return false;     });

Ho fatto una prova scrivendo solo la riga html e lo script jquery e funziona tutto regolarmente, ovvero viene stampato sulla console ok.

Ma quando provo sulla macchina in produzione, con tutto il codice, viene caricata la pagina contenuta nel attributo href, la parte di script non viene neanche presa in considerazione(non stampa nella console "ok"), perché presumo che l'evento venga intercettato precedentemente da un'altra porzione di codice.

La domanda è la seguente: c'e' un modo di vedere esattamente cosa succede facendo click sull' elemento 'a' prima che passi all'altra pagina?
Con la console di chrome non ho la possibilità di vederlo, mi viene caricata direttamente l'altra pagina, esiste un plugin di chrome por questo scopo?

È abbastanza urgente, ringrazio per qualsiasi suggerimento!

Grazie,
Roberto

[KillerWorm]

Ciao, puoi postare il link alla pagina pubblica?

[robynosse]

Ciao, puoi postare il link alla pagina pubblica?

Purtroppo non è possibile l'accesso dall'esterno!

[KillerWorm]

Purtroppo da ciò che hai indicato non è semplice capire dove sta il problema, è possibile fare solo delle supposizioni.

Per il momento mi vengono in mente due possibili cause:

E' possibile che l'elemento <a> in questione non sia stato ancora creato sul DOM nel momento in cui viene eseguito quello script. In questo caso il selettore jQuery non andrà a pescare niente e non assegnerà il listener. Assicurati quindi di avere lo script dentro ready o in fondo al body.

E' possibile che ci sia qualche altro errore nel resto dello script, in tal caso la parte che hai specificato potrebbe non essere eseguita. Controlla sulla console che non saltino fuori errori riguardo lo script.

Se usi opportunamente la console web del tuo browser non credo ci sia bisogno di ulteriori plugin (IMHO).

Se ancora non riesci, prova a postare l'intero codice sorgente (html) della pagina incriminata.

[robynosse]

Se usi opportunamente la console web del tuo browser non credo ci sia bisogno di ulteriori plugin (IMHO).

...c'e' modo di "monitorare" un click su un elemento <a> prima che cambi pagina con la console?

Non riesco a farlo, non so come fare il debug in questo caso, per seguire il suo "flusso naturale"!

[cavicchiandrea]

...c'e' modo di "monitorare" un click su un elemento <a> prima che cambi pagina con la console?

Non riesco a farlo, non so come fare il debug in questo caso, per seguire il suo "flusso naturale"!

Direi di no, quando scatta l'evento c'è contestualmente il cambio pagina pertanto documento nuovo e la console non può monitorare qualcosa che non esiste più.
Non so a cosa ti serve questo processo ma dubito che sia la strada corretta

[KillerWorm]

Ascolta, se mi dai retta posso aiutarti, altrimenti lascio che risponda qualcun altro.
Lascia perdere il fatto che tu non riesca a monitorare il click, se il listener non viene intercettato significa al 99,99% che non è stato assegnato.

Andando per ordine, prova a mettere un log del genere esattamente prima dello script che hai postato:

console.log($('area[href^="?mappa="],a[href^="?mappa="]'));
$('area[href^="?mappa="],a[href^="?mappa="]').on("click",function(event){ 
        event.preventDefault(); 
                console.log("ok");         
return false;     });

Sulla console dovresti ottenere un oggetto jQuery in cui ci trovi una proprietà length. Se ha valore 0 significa che il selettore non ha trovato niente. Fammi sapere.

[robynosse]

Ascolta, se mi dai retta posso aiutarti, altrimenti lascio che risponda qualcun altro.
Lascia perdere il fatto che tu non riesca a monitorare il click, se il listener non viene intercettato significa al 99,99% che non è stato assegnato.

Secondo me hai perfettamente ragione, il problema sta sicuramente nel fatto che non è ancora stato caricato l'elemento per cui non posso assegnargli un listener prima di caricarlo.
Avrò accesso al codice sorgente domani mattina e farò la prova che mi hai detto, poi ti farò sapere.

Grazie!

[robynosse]

Questa mattina ho potuto accedere al codice sorgente.

Il problema era che gli elementi con il tag <a> venivano creati dinamicamnete con Jquery dopo del listener sugli stessi.
È bastato aggiungere, dopo la creazione "dinamica" degli anchor text, il listener su questi stessi tag(con Jquery) e adesso funziona tutto regolarmente!

Grazie,
Roberto

[KillerWorm]

Bene. Non voglia essere una polemica ma giusto per mettere i puntini sulle i e dare qualche consiglio, sei stato poco chiaro fin dall'inizio. Non avevi specificato che si trattava di elementi creati in modo dinamico (era una cosa rilevante da indicare), ma da ciò che hai indicato si dava per scontato che tu avessi già quell'elemento sulla pagina:

ho un elemento html <a href="?mappa=italia.gif&immagine=12"> su cui ho registrato un listener:

Giusto un consiglio, quando fai delle richieste sui forum cerca sempre di essere il più dettagliato possibile fin dal primo post. Per di più hai anche specificato che era urgente, cosa che è sempre meglio evitare di scrivere perché non ti da nessuna priorità rispetto agli altri utenti, anzi ti fa apparire più antipatico (come se pretendessi qualcosa).

Tornando all'oggetto della discussione, non ho capito esattamente come hai risolto, ad ogni modo una tecnica solitamente usata è quella di delegare l'evento, con una cosa del genere:

$("body").on("click", 'area[href^="?mappa="],a[href^="?mappa="]', function(event){ ...

In questo modo il listener sarà assegnato a tutti gli elementi (specificati dal selettore) anche se creati successivamente.

Buon proseguimento.