Kendo UI Mobile Button data-click 触发两次答案

【问题标题】：Kendo UI Mobile Button data-click firing twiceKendo UI Mobile Button data-click 触发两次
【发布时间】：2012-12-26 10:22:52
【问题描述】：

我一直在测试我之前制作的一个简单 (HTML5/jQuery) 应用程序，其中用户在文本框中输入消息，当单击按钮时，该消息被视为警报。问题是每次我点击那个按钮时，data-click 属性似乎会触发两次，因为消息会被警告两次。

我目前正在使用 Kendo UI 版本 2012.3.1114 和 jQuery 1.8.2 **我也用 jQuery 1.8.3 尝试过，得到了相同的结果，但是当使用旧版本的 Kendo 时一切正常

有人可以帮帮我吗？！！！

更新：这是我的代码 **顺便说一句，我正在使用波纹模拟器来测试这个应用程序，甚至在 iPad 上进行了尝试，结果相同

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />   
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="mainView">
    <br/>
    <center><a data-role="button" data-click="showAlert">Click Me</a></center>
    <br/>
</div>
<script>
    function showAlert(){
        alert("Clicked!!!");
    }
</script>
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

【问题讨论】：

制作一个测试页面，非常简单，只需一个可点击的元素和一个警报。它的行为是否正确？如果不是，则怀疑该设备。否则，请逐步构建页面，直到它中断。你最后添加的任何东西都是罪魁祸首。诊断完成。现在想想解决办法。
我用KendoUI Mobile很久了，如果不使用数据绑定数据点击，通常会出现鬼点击。我已经测试了你的代码，它工作正常。链接：jsfiddle.net/JSLHQ/1 请提供有关如何重现您的问题的更多详细信息，例如设备或浏览器版本。

标签： jquery html cordova button kendo-ui

【解决方案1】：

在为 MVC 使用 Kendo UI 时，我也遇到了同样的事情。在剑道 UI 按钮定义中，我有：

 @(Html.Kendo().Button().Name("showFirstGraphButton")
 .Tag("button")
 .Content("Submit Selection")
 .HtmlAttributes(new { id = "showFirstGraphButton" })
 .Events(ev => ev.Click("showFirstGraphButtonOnClick")))

在我编写的事件处理函数中。

function showFirstGraphButtonOnClick(e) {
e.preventDefault();
e.event.preventDefault(); 
.....  
}

它对我有用，我确实验证了表单，然后如果每次验证都通过了，我就使用 jquery 提交它。

【讨论】：

【解决方案2】：

我刚刚创建了一个简单的移动页面。添加一个文本框和按钮。在按钮上单击对文本框内容发出警报。我没有收到两次警报。看看下面的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Events</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="button-events" data-title="Button Events">
        <input id="txtMessage" style="display: block; margin: 2em; text-align: center;width:280px"/>
        <a id="mobile-button3" data-click="showAlert" data-role="button" style="display: block; margin: 2em; text-align: center;">Show Alert</a>
    </div>
    <script>
        function showAlert(e) 
        {
            alert($("#txtMessage").val())
        }
    </script>
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>

您能否粘贴您的代码 - 以便我们进行调试？

【讨论】：

【解决方案3】：

我意识到这是一个老问题，但只是为了在有人来找答案时得到答案。我遇到了同样的问题，在我的函数中返回 false 为我解决了这个问题。

【讨论】：