2013-01-19 18 views
6

Mam bardzo prosty przypadek użycia na mojej stronie indeksu.Wszystkie zdarzenia mobilne jQuery uruchamiane dwukrotnie

 <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> 

Z jakiegoś powodu to wydarzenie wystrzeliwuje 2 razy. Teraz jestem pewien, że nie związałem innego zdarzenia na znaczniku body, ponieważ jest to pierwsza strona. Próbowałem innych prostych zdarzeń, takich jak dotykowy itd. Wszystkie strzelają dwa razy. Co ja robię źle ?

Aktualizacja: -

Mam zmodyfikowany odpowiedź ja oznaczony jako poprawne w następujący sposób i to działało. Wydarzenia na tej stronie nie są uruchamiane dwukrotnie.

<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: Masz rację, przepraszam za to. Próbowałem kilku rozwiązań, ale nie mam jeszcze dokładnej odpowiedzi. Ale zaznaczę tego, nad którym pracuję. –

+0

Powinieneś oznaczyć tylko poprawne odpowiedzi, nie oznaczaj odpowiedzi, która nie jest poprawna. –

+0

Tak, ale ta, którą zaznaczyłam jako poprawną, działała z pewnymi zmianami. Odpowiednio zaktualizuję odpowiedź. –

Odpowiedz

14

Istnieje kilka sposoby uniknięcia tego problemu. Podobnie jak w przypadku numeru CodeJack, jest to znany problem, ale nie jest to błąd, głównie z powodu unikalnego sposobu obsługi stron o jQM.

  • Najprostsza z nich to rozpiąć zdarzenia przed wiążące go ponownie, tak:

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

    w przypadku gdy masz inne imprezy zobowiązany do tego samego użytku obiektu to:

    $("body").off("swipeleft").on("swipeleft", function(event) { 
        alert('hello'); 
        /*window.location.href = "html/first.html";*/    
    }); 
    
  • Istnieje alternatywa dla korzystania z funkcji bind/unbind zdarzeń, live/die i on/off. Zamiast rozłączać się przed ponownym związaniem, należy użyć filtru zdarzeń jQuery, można go użyć do określenia, czy zdarzenie zostało już powiązane. Nie zapomnij pobrać go z linku zamieszczonego poniżej (nie jest to standardowa część jQM).

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

    To jest mój przykład użycia:

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

    Używam każdego, ponieważ moja karuzela div ma wiele wewnętrznych bloków, ale zasada jest taka sama. Jeśli w # karuzelowym elemencie div nie ma zdarzenia kliknięcia, dodaj je do tego wydarzenia. W twoim przypadku zapobiegnie to wiązaniu wielu zdarzeń.

Dodatkowe rozwiązania można znaleźć here.

+0

Wydaje się, że to działa doskonale, dzięki bardzo ... !!! –

1

To jest znany problem ... Znalazłem go uniknąć poprzez przeniesienie kodu js wewnątrz <head> tag..i donno reason..but że unika się problemu ...

4

Powinieneś spróbować użyć zdarzenia gotowego do dokumentu, aby dołączyć zdarzenia do treści. Możesz także dołączyć zdarzenie tylko raz do ciała.

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

W przypadku gdy masz inne wydarzenia związane do tego samego użytku obiektu to:

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