All jQuery mobile events firing twice

Refresh

December 2018

Views

5.8k time

6

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>

3 answers

4

Вы должны попытаться использовать документ , готовое событие приложить события к телу. Кроме того, вы можете прикрепить событие только один раз к телу.

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

В случае, если у вас есть другие события, связанные с использованием того же объектом этим:

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

Есть несколько способов избежать этой проблемы. Как CodeJack сказал вам , что это вопрос знает , но это не ошибка, в основном из-за jQM уникального способа обработки страниц.

  • Самый простой один является отвязать событие, прежде чем снова его связывания, как это:

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

    В случае, если у вас есть другие события, связанные с использованием того же объектом этим:

    $("body").off("swipeleft").on("swipeleft", function(event) {
        alert('hello');
        /*window.location.href = "html/first.html";*/             
    });
    
  • Существует альтернатива использованию событий связывания / отвязать, жить / умереть и вкл / выкл. Вместо того , развязывание , прежде чем связать его снова использовать фильтр событий JQuery , он может быть использован для определения , если событие уже связывают. Не забудьте скачать его из ссылки , публикуемой ниже (это не является стандартной частью jQM ).

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

    Это мой пример использования:

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

    Я использую каждый, потому что моя карусель ДИВ имеет много внутренних блоков, но принцип тот же. Если #carousel внутренних DIV элементы не имеют события щелчка добавить их это событие. В вашем случае это будет препятствовать привязки нескольких событий.

Дополнительные решения можно найти здесь .

1

Это известная проблема ... я нашел его , чтобы избежать путем перемещения кода JS внутри <head>tag..i Donno в reason..but , что избежать этой проблемы ...