jQuery Mobile 1.3.1 taphold事件被多次激活

Question

我将taphold事件绑定到表的td元素,但是当我点击并按住以触发事件时,它会以某种方式被触发多次.我的示例代码:

$("td").on("taphold", function(){
    alert("taphold fired!");
});

如果我按住水龙头,我将同时收到至少6条警报消息.如何举行活动只是举行一次？我在带有safari和chrome浏览器的Ipad上测试了代码

Answer 1

介绍

jQuery Mobile以与经典Web应用程序不同的方式工作.根据您每次访问提到的页面时设置绑定事件的方式,它将反复绑定事件.这不是一个错误,它只是jQuery Mobile处理其页面的方式.

您的问题有几种解决方案.每种解决方案都有上行和下行.

解决方案1

最佳解决方案是pageinit用于绑定事件.如果您在正式文件看看,你会发现,pageinit将触发只有一次,就像文件准备好了,所以没有办法的事件将再次约束.这是最好的解决方案,因为您没有像使用off方法删除事件时那样的处理开销.

工作jsFiddle示例:http://jsfiddle.net/Gajotres/AAFH8/

解决方案2

在绑定事件之前删除事件:

$('#index').on('pagebeforeshow',function(e,data){    
    $(document).off('click', '#test-button').on('click', '#test-button', function(e) {
        alert('Button click');
    });    
});

工作jsFiddle示例:http://jsfiddle.net/Gajotres/K8YmG/

解决方案3

使用jQuery Filter选择器,如下所示:

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

因为事件过滤器不是官方jQuery框架的一部分,所以可以在这里找到:http: //www.codenothing.com/archives/2009/event-filter/

简而言之,如果速度是您的主要关注点,那么Solution 3就好了Solution 2.

解决方案4

一个新的,可能是最容易的.

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

工作jsFiddle示例:http://jsfiddle.net/Gajotres/Yerv9/

最后的说明

如果您想了解有关页面事件的更多信息,它们如何工作以及如何使用它们来防止多个事件绑定,请查看此文章,为了透明,它是我的个人博客.或者它也可以在这里找到.