Home/ Questions/Q 9160269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T13:41:54+00:00

I have a very simple use case on my index page. <script src=js/jquery-min.js></script> <script

  • 0

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 is firing 2 times. Now I am sure I haven’t binded another event on the body tag as this is the first page. I have tried other simple events also like touchstart etc. They all are firing twice. What am I doing wrong ?

Update :-

I have modified the answer I marked as correct in the following way and it worked. The events on this page are not firing 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are few ways of avoiding this problem. Like CodeJack told you this is a know issue but it is not an error, mainly because of the jQM unique way of handling pages.

    • Easiest one is to unbind an event before binding it again, like this:

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

      In case you have other events bound to 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 bind/unbind, live/die and on/off. Instead of unbinding before you bind it again use jQuery event filter, it can be used to identify if event is already been bind. Don’t forget to download it from link posted below (it 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 am using each because my carousel div has many inner blocks but principle is the same. If #carousel inner div elements don’t have click event add them that event. In your case this will prevent multiple event binding.

    Additional solutions can be found here.

    • 0