0

I understand that when you create a listener in jQuery Mobile like:

$('.this-class').on('swipe',tapHandler);

tapHandler will run twice. In order to eliminate this problem I have seen multiple solutions, such as:

$('.page-card').off('swipe').on('swipe',tapHandler);

or

wrapping it in side of pageinit in order to eliminate chaching issues if you are creating dynamic content within pagebeforeshow as seen here.

I also understand that even bubbling comes in to play here.

However, I was hoping that someone could explain why this known exists, and why the contributes to jQuery decided to take this route, knowing the drawbacks.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
Greg Wiley
  • 323
  • 1
  • 2
  • 12
  • 1
    Are you sure you don't bind it twice? AFAIR, I never had this problem with the swipe event. – jgillich May 24 '13 at 18:44
  • Yeah, I'm sure I'm not binding twice. The first code example is only found once. The only thing in the `tapHandler()` function is `console.log('trigger');` Every time I swipe I get the "trigger" message twice. – Greg Wiley May 24 '13 at 20:18

1 Answers1

2

First lets discuss how jQuery Mobile works. Unlike normal web pages where jQuery is used jQuery Mobile uses ajax to load pages into the DOM, one or more pages can be loaded. Because of this, classic document ready is useless so jQM developers created page events.

Page events are major for this story. While document ready will trigger only one per page most of page events will trigger multiple times, depending on how much time page is re/visited.

Lets get back to on function (and all other similar functions like bind, delegate, deprecated live). Again when working on normal pages you will NEVER come to situation because same page will never stay in a DOM.

Here comes jQuery Mobile. If you are using a binding method inside a pageshow (or similar page event) that event will bind over and over. Basically on method was never intended to be used like this.

If you want to find out more about methods of prevention take a look at my other answer, look for topic: Prevent multiple event binding/triggering

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Ok. My problem is that when running `$('.this-class').on('swipe',tapHandler);`, tapHandler is initiated twice on a single swipe, even if I haven't moved to a different view. What makes this happen? – Greg Wiley May 24 '13 at 20:21
  • Can't tell you without seeing your code. Can you mail me your project or at least create a smaller skeleton version so I can tell you what is wrong. – Gajotres May 24 '13 at 21:15
  • `$(document).ready(function(){ var isDown = false; $('.page-card').off().on('swipe',tapHandler); $('body').off('vmousedown').on('vmousedown',down); $('body').off('vmouseup').on('vmouseup',isUp); $('body').off('vmousemove').on('vmousemove',recorder); function tapHandler(event) { console.log(event); } function down(event) { isDown = true; console.log('down'); } function isUp(event) { isDown = false; console.log('up'); } function recorder(event) { if(isDown) { console.log('moving'); return event.pageX; } } });` The entire file. Just testing some things for now. – Greg Wiley May 28 '13 at 14:12