Question

I am trying to make a simple app for myself and play a bit with jQuery mobile. I have created 3 simple sites:

http://jsfiddle.net/ZweUQ/2/

var clickEvent = 'click'; // 'tap'
// global init handler
$(document).live('pageinit', function() {
    console.log('init');
    $('.clck').bind(clickEvent, function(e) {
        console.log($(this).attr("data-href"));
    $.mobile.changePage('#search_what');
});

The problem I have is, the div on the second page, where I want to be a clickable / tapable and to switch to the site 3. When I click then site3 is coming, but when I am clicking on the back button, then the windows is switching to site 2 back and immediately switching back to site 3 again.

Click 2-3 times on the “What” div and on the back button on site 3 so you can see what I am trying to tell you.

How to solve this issue?

Answer 1

This is a common jQuery mobile problem. It is caused because multiple events are bind to same element. Every time you return to previous page you bind same event again.

There are 2 solutions for this problem.

1. Before you bind an event to some element check if that same event is not already bind.

   Example:

   $('.menu-browse:Event(!' + touchEvent + ')').each(function(){
       $('.menu-browse').bind(touchEvent, function(e) {
   
       });
   });
   

or

2. Each time you bind an event, unbind it before.

   Example:

   $(this).unbind();
   $(this).bind(touchEvent, function(e) {
   
   });
   

Sadly there are no bulletproof solutions for this problem.

Take a look now:

http://jsfiddle.net/Gajotres/ZweUQ/4/