Geek Answers Handbook

All jQuery mobile events firing twice

I have a very simple use case on my index page.

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

For some reason, this event fires 2 times. Now I am sure that I did not associate another event with the body tag, since this is the first page. I tried other simple events like touchstart etc. They all shoot twice. What am I doing wrong?

Update: -

I changed the answer, which I called correct, as follows, and it worked. Events on this page do not shoot twice.

 <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>
+6
source share
3 answers

There are several ways to avoid this problem. As CodeJack you were informed that this is a problem with information, but it is not a mistake, mainly because of the unique way of handling jQM pages.

  • The easiest way is to cancel the event before binding it, for example:

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

    If you have other events related to the same object, use this:

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

  • There is an alternative to using event bindings / unbind, live / die and on / off. Instead of decoupling, before binding it again, use the jQuery event filter, you can use it to determine if the event has already been bound. Remember to download it from the link below (this is not a standard part of jQM ).

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

    This is my usage example:

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

    I use each because my carousel div has many internal blocks, but the principle is the same. If the inner elements of div # carousel do not have a click event, add them to this event. In your case, this will prevent the binding of multiple events.

Additional solutions can be found here .

+14
source

You should try using a document ready event to attach events to the body. You may also want to bind an event only once to the body.

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

If you have other events related to the same object, use this:

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

This is a known issue ... I found that it was avoided by moving js code inside the <head> . I don’t know the reason ... but this avoided the problem ...

+1
source

More articles:


All Articles