2013-01-19 15 views
6

Ho un caso d'uso molto semplice sulla mia pagina indice.Tutti gli eventi mobili di jQuery che si attivano due volte

 <script src="js/jquery-min.js"></script> 
     <script src="js/jquery-mobile.js"></script> 
     <script type="text/javascript" src="cordova-2.2.0.js"></script> 

     <script> 
       $("body").on("swipeleft", function(event) { 
       alert('hello'); 
       /*window.location.href = "html/first.html";*/    
      }); 
     </script> 

Per qualche motivo questo evento viene attivato 2 volte. Ora sono sicuro di non aver vincolato un altro evento sul body tag in quanto questa è la prima pagina. Ho provato altri eventi semplici come touchstart, ecc. Stanno sparando due volte. Che cosa sto facendo di sbagliato ?

Aggiornamento: -

Ho modificato la risposta ho segnato come corretta nel seguente modo e ha funzionato. Gli eventi in questa pagina non sparano due volte.

<head> 
     <script type="text/javascript" src="js/jquery-min.js"></script> 
      <script> 
       $(document).bind("mobileinit", function() { 
         $.mobile.autoInitializePage = false; 
         $.mobile.defaultPageTransition = 'none'; 
         $.mobile.touchOverflowEnabled = false; 
         $.mobile.defaultDialogTransition = 'none'; 
         $.mobile.loadingMessage = '' ;     
        }); 
      </script> 
      <script type="text/javascript" src="js/jquery-mobile.js"></script> 
      <script type="text/javascript" src="cordova-2.2.0.js"></script> 
</head> 
+0

@ Floradu88: Hai ragione dispiace. Stavo provando alcune soluzioni ma non ho ancora ottenuto la risposta esatta. Ma segnerò quello su cui sto lavorando. –

+0

È necessario contrassegnare solo le risposte corrette, non contrassegnare una risposta che non è corretta –

+0

Sì, ma quello che ho contrassegnato come corretto ha funzionato con alcune modifiche ad esso. Aggiornerò la risposta di conseguenza. –

risposta

14

ci sono poche modi per evitare questo problema. Ad esempio CodeJack ti ha detto che si tratta di un problema noto, ma non si tratta di un errore, principalmente a causa del modo unico di gestire le pagine di jQM.

  • più semplice è non associare un evento prima di legame di nuovo, in questo modo:

    $("body").off().on("swipeleft", function(event) { 
        alert('hello'); 
        /*window.location.href = "html/first.html";*/    
    }); 
    

    Nel caso in cui si dispone di altri eventi legati al medesimo uso oggetto questo:

    $("body").off("swipeleft").on("swipeleft", function(event) { 
        alert('hello'); 
        /*window.location.href = "html/first.html";*/    
    }); 
    
  • C'è un'alternativa all'utilizzo di binding/unbind dell'evento, live/die e on/off. Invece di svincolarti prima di legarlo di nuovo usa il filtro eventi jQuery, può essere usato per identificare se l'evento è già stato associato. Non dimenticare di scaricarlo dal collegamento pubblicato di seguito (non è una parte standard di jQM).

    http://www.codenothing.com/archives/2009/event-filter/

    Questo è il mio esempio di utilizzo:

    $('#carousel div:Event(!click)').each(function(){ 
        //If click is not bind to #carousel div do something 
    }); 
    

    Sto usando ogni perché il mio carosello div ha molti blocchi interiori, ma principio è lo stesso. Se # carousel gli elementi div interni non hanno un evento click aggiungili a quell'evento. Nel tuo caso ciò impedirà il binding di più eventi.

soluzioni aggiuntive possono essere trovate here.

+0

Sembra funzionare perfettamente grazie mille ... !!! –

1

Questo problema è noto ... ho trovato per evitare spostando il codice js all'interno <head> tag..i Donno la reason..but che ha evitato il problema ...

4

Si dovrebbe provare a utilizzare l'evento pronto per il documento per allegare eventi al corpo. Inoltre, è possibile allegare un evento solo una volta al corpo.

$(document).ready(function(){ 
    $("body").off().on("swipeleft", function(event) { 
     alert('hello');   
    }); 
}); 

Nel caso in cui si dispone di altri eventi legati al medesimo uso oggetto questo:

$(document).ready(function(){ 
    $("body").off("swipeleft").on("swipeleft", function(event) { 
     alert('hello');   
    }); 
}); 
Problemi correlati