jQuery Mobile 1.3.1 taphold 事件多次触发答案

【问题标题】：jQuery Mobile 1.3.1 taphold event fired multiple timesjQuery Mobile 1.3.1 taphold 事件多次触发
【发布时间】：2013-06-14 07:16:43
【问题描述】：

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

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

如果我按住水龙头，我会同时收到至少 6 条警报消息。我怎样才能让事件在举行时只触发一次？我在带有 safari 和 chrome 浏览器的 Ipad 上测试了代码

【问题讨论】：

标签： jquery jquery-mobile jquery-plugins

【解决方案1】：

简介

jQuery Mobile 的工作方式与经典网络应用程序不同。根据您每次访问提到的页面时如何绑定事件，它会一遍又一遍地绑定事件。这不是错误，这只是 jQuery Mobile 处理其页面的方式。

您的问题有多种解决方案。每个解决方案都有优点和缺点。

解决方案 1

最好的解决方案是使用 pageinit 来绑定事件。如果您查看官方文档，您会发现 pageinit 将触发 ONLY 一次，就像文档准备好一样，因此无法再次绑定事件.这是最好的解决方案，因为您没有像使用 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/

最后说明

如果您想了解有关页面事件、它们如何工作以及如何使用它们来防止多个事件绑定的更多信息，请查看此 ARTICLE，要透明，这是我的个人博客。或者也可以找到HERE。

【讨论】：

第一个解决方案对我不起作用。在问这个问题之前我已经试过了。第二部和第四部作品。在第二个解决方案中，我宁愿使用 off() 和 on() 而不是 die() 和 live()，因为后者似乎在新版本的 jQuery 中已被弃用。我还没有尝试过第三种解决方案。无论如何，感谢您提供的信息丰富的回答。
@DevX3i 你对直播是正确的，tnx 注意到它，我只是忘记了。
@Floradu88: tnx 和 +1 给你，我只是忘了开/关
是的，谢谢，但我们的两个回复都为此提供了多种选择。

【解决方案2】：

也尝试使用off：

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

您需要确保一次只有一个用于 taphold 的事件处理程序。这也会触发许多点击事件。

【讨论】：

这对我有用。谢谢！我们也可以将这两行链接起来，利用jQuery的链接能力。