1

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

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

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

4

2 回答 2

7

介绍

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/

最后说明

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

于 2013-06-18T07:26:40.697 回答
2

也尝试使用off：

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

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

于 2013-06-18T07:19:00.853 回答