jquery 移动点击事件触发两次答案

【问题标题】：jquery mobile click event fires twicejquery 移动点击事件触发两次
【发布时间】：2012-12-01 14:25:54
【问题描述】：

我对一个简单的 JQuery 移动应用程序有疑问。这一切都归结为点击事件触发两次。

类似问题的解决方案没有解决此问题。

无论是部署到设备还是在浏览器中显示都会出现问题。

这是代码

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

<script src="jquery-1.8.2.min.js" type="text/javascript"></script>  
<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="cordova-2.2.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).bind("mobileinit", function () {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
</script>

<link rel="Stylesheet" href="jquery.mobile-1.2.0.min.css" />

<div>
    <input type="button" id="ButtonSubmit" value="Save" />
</div>

<script type="text/javascript">


    $("#ButtonSubmit").click(function () {
        alert('Clicked');
    });

</script>

【问题讨论】：

这里的成功答案对我有用：stackoverflow.com/questions/12052132/…

标签： jquery cordova jquery-mobile mobile

【解决方案1】：

您可以使用下面提到的方法解决这个问题。

首先使用unbind，然后bind，如下所示：

<script type="text/javascript">

    $("#ButtonSubmit").unbind('click').bind('click', function () {
            alert('Clicked');
            return false; //to prevent the browser actually following the links!
        });

</script>

更新：如果你有 on 方法，那么你可以使用如下。

注意：当您使用 off 方法时，它会删除以前的点击事件处理程序，而使用 on 方法会添加新的事件处理程序。B'cos of that 它不允许发生点击 2 次。

<script type="text/javascript">

$('#ButtonSubmit').off('click').on('click', function(){

  alert('Clicked');
  return false; //to prevent the browser actually following the links!
}); 

</script>

【讨论】：

+1 非常好。但为什么会这样？为什么.on('click') 被解雇了两次？
@Omar 请查看我的更新部分了解更多详情。

【解决方案2】：

在最新的 jQuery mobile 中发生了很多实验性的东西，触发了点击事件，这可能导致了这些问题（第 2689 行）：

// This plugin is an experiment for abstracting away the touch and mouse
// events so that developers don't have to worry about which method of input
// the device their document is loaded on supports.
//
// The idea here is to allow the developer to register listeners for the
// basic mouse events, such as mousedown, mousemove, mouseup, and click,
// and the plugin will take care of registering the correct listeners
// behind the scenes to invoke the listener at the fastest possible time
// for that device, while still retaining the order of event firing in
// the traditional mouse environment, should multiple handlers be registered
// on the same element for different events.
//
// The current version exposes the following virtual events to jQuery bind methods:
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"

http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js

我修复它的方法是：

$('#mobileMenuItem').off('click');

然后它开始正常运行。

【讨论】：

【解决方案3】：

我认为这与您处理事件的方式有关。即，使用 pageinit。

另外data-url不同的页面可能会被隐藏，所以同样的js也不管怎样运行。

在您的代码中，我会做以下更改

<script type="text/javascript">
   $(document).off('click').on('click', '#ButtonSubmit', function () {
        alert('Clicked');
    });
</script>

这样，我知道我会绑定一次。

【讨论】：

【解决方案4】：

您是否尝试阻止默认操作？

<script type="text/javascript">
    $("#ButtonSubmit").click(function (e) {
        e.preventDefault();
        alert('Clicked');
    });
</script>

【讨论】：

【解决方案5】：

如果您的 onclick 处理程序触发了两次，那么您的处理程序很可能被注册了两次。您可以在注册处理程序之前添加一些日志记录，以验证正在发生的事情。然后你可以调试它为什么会被注册两次。

【讨论】：