jquery mobile点击事件触发两次

Question

我在使用简单的 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>

Answer 1

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

首先使用取消绑定(bind)，然后绑定(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'因为它不允许单击 2 次即可发生。

<script type="text/javascript">

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

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

</script>