jQM – problema esecuzione script su button click
- Questo topic ha 4 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 9 anni, 6 mesi fa da jqueryitalia.
- AutorePost
- 23 Ottobre 2014 alle 13:05 #6410myneitPartecipante
Ciao a tutti,
da diverso tempo uso jQuery ma solo recentemente mi sono avvicinato a jQuery Mobile. sto realizzando una piccola web-app ma mi succede una cosa strana che non riesco a spiegarmi.
Nella pagina ho un <button>, una volta cliccato lancia una funzione javascript che verifica un campo: se non è popolato mostra un errore, altrimenti manda ad un’altra pagina dove viene visualizzato un dettaglio di informazioni.
Tornando dalla seconda pagina alla prima e rieseguendo il comando, il button non funziona più… se invece faccio un refresh della pagina allora funziona…
qualche spezzone di codice per chiarezza:
pagina1, definizione del button:
<button data-role="button" id="cmdEseguiRicerca">Cerca numero</button>
pagina1, definizione chiamata alla funzione di ricerca:
$( '#cmdEseguiRicerca' ).click( function() { cmdCerca(); });
in realtà in origine nel button c’era l’attributo
onclick='cmdCerca();'
ma l’esito è lo stesso…
Dopo aver verificato il campo, viene aperta la nuova pagina tramite window.location:
var cmdCerca = function() { var lotto = $( '#txtCodice' ).val(); if( lotto == '' ) { mostraErrore('ATTENZIONE','Numero di Lotto non specificato.'); } else { window.location = '../result/?l='+lotto; } return false; }
La pagina 2, dopo aver mostrato l’esito della ricerca, consente di tornare all pagina1 (di ricerca) tramite questo codice:
<a href="../reader/"><span style="font-size: 10px;">indietro</span></a>
quindi tutto (apparentemente) molto semplice
Il primo giro funziona senza problemi… ma una volta tornati alla pagina1, cliccando il pulsante (button) non viene eseguito più il codice.
In realtà la funzione viene richiamata: nel campo di testo ho impostato una funzione che mi consente, alla pressione xdel tasto INVIO, di eseguire la ricerca come premendo il pulsante (button), e questo funzionaQuello che sembra “inerte” è proprio il button.
Ho provato anche sostituendo al button un’ancora data-role=”button”: stesso esito
Facendo un refresh della pagina (es.: icona ricarica su iOS Safari ad DX nella barra dell’indirizzo) la funzione riprende senza problemi
La cosa è strana perché di fatto lo spostamento dalla pagina2 alla pagina1 avviene con window.location che praticamente apre una nuova pagina (corretto?), mentre nel mio caso è come se mantenesse una sorta di memoria del pulsante premuto e non consentisse un’ulteriore pressione (perché poi? se prima di passare alla pagina2 premo più volte il button senza dati nel campo input, la funzione viene eseguita sempre…)
IMPORTANTE
Il problema si manifesta solo con iPhone e iPad (sia Safari che Chrome), mentre da PC con Chrome funziona sempre mentre con Safari si presenta comunque il problemaSpero di essermi spiegato e mi auguro qualcuno mi possa dare una dritta perché ci sto veramente diventando matto
grazie fin d’ora
M.
23 Ottobre 2014 alle 13:35 #6412jqueryitaliaAmministratoreCiao myneit.
Sembra un problema di persistenza nel DOM.
Prova a sostituire la funzione:
$( '#cmdEseguiRicerca' ).click( function() { cmdCerca(); });
con:
$( '#cmdEseguiRicerca' ).on('click', function() { cmdCerca(); });
Un’altro consiglio che ti posso dare è verificare che l’ID ‘cmdEseguiRicerca’ sia univoco all’interno della pagina.
Buon Lavoro!
23 Ottobre 2014 alle 14:19 #6414myneitPartecipanteGrazie jqueryItalia per la veloce risposta: ho appena fatto il test… ma anche mettendo .on(‘click’, funcion()… il risultato è il medesimo.
per scrupolo ho anche verificato la unicità dell’ID, e non ci sono doppioni…
solo una domanda: io ho messo la funzione da te citata all’interno di $(document).on(‘pageinit’, function(){}… meglio spostarla?
23 Ottobre 2014 alle 15:30 #6415myneitPartecipanteApparentemente ho risolto modificando la funzione di richiamo della pagina1 da parte della pagina2 (sto ancora facendo prove ma sembra funzionare)
prima era
<a href="../reader/"><span style="font-size: 10px;">indietro</span></a>
adesso l’ho modificato con
evidentemente richiamando l’URL con l’href impediva un corretto ricaricamento del DOM (come suggerivi tu jqueryItalia).
<a href="document.location.href='../reader/';"><span style="font-size: 10px;">indietro</span></a>
comunque grazie, non mancherò a pubblicare dovessero esserci sviluppi
M
25 Ottobre 2014 alle 14:34 #6417jqueryitaliaAmministratoreOttimo!!!
Restiamo in attesa di notizie allora 😉
- AutorePost
- Devi essere connesso per rispondere a questo topic.