jQuery Mobile div作为链接和后退按钮问题 [英] jQuery Mobile div as link and back button issue

问题描述

我正在尝试为自己创建一个简单的应用程序，并使用jQuery mobile玩一些游戏.我创建了3个简单的网站:

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');
});

我遇到的问题是第二页上的div，我想在其中单击/可点击并切换到站点3.单击时，site3就要来了，但是当我单击后退按钮时，则窗口将切换回站点2，然后立即再次切换回站点3.

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.

在"What" div和网站3的后退按钮上单击2-3次，这样您就可以看到我要告诉您的内容.

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.

如何解决此问题?

推荐答案

这是一个常见的jQuery移动问题.这是因为多个事件绑定到同一元素.每次返回上一页时，都会再次绑定同一事件.

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.

有2个解决此问题的方法.

There are 2 solutions for this problem.

1. 在将事件绑定到某些元素之前，请检查该事件是否尚未绑定.

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

示例:

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

    });
});

或

1. 每次绑定事件时，请先取消绑定.

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

示例:

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

});

遗憾的是，没有针对此问题的防弹解决方案.

Sadly there are no bulletproof solutions for this problem.

现在看看:

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

这篇关于jQuery Mobile div作为链接和后退按钮问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！