CODEWITHSUNDEEP
jquery-mobilejquery
nnikolay
nnikolay

Reputation: 1751

jQuery Mobile div as link and back button issue

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?

Upvotes: 0

Views: 725

Answers (1)

Gajotres
Gajotres

Reputation: 57319

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

  1. 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/

Upvotes: 1

Related Questions