jQuery Mobile Swipe 事件未触发...
Posted
技术标签:
【中文标题】jQuery Mobile Swipe 事件未触发...【英文标题】：jQuery Mobile Swipe events are not firing ... 【发布时间】：2016-09-07 10:54:58 【问题描述】：我不想在这里做任何特别的事情......我只想从捕捉一些滑动事件开始。所有的文档、wiki 和博客文章以及视频教程都表明这是一项非常简单的任务……那我为什么要这么辛苦！！？
我正在引用正确的文件...其他东西有效，所以我知道它们不是损坏的引用...
<link rel="stylesheet" href="/libs/jQuery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="/libs/jQuery/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/libs/jQuery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
html 是从外部加载的，但相当直接......它是一个 ASP.NET WebForms 页面，但绝对没有服务器端活动。它只是呈现 HTML 并在页面中正确显示。大多数行只是几个“页面”上的 jQuery 属性。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- BEGIN READING DATE -->
<div data-role="page" id="acctReadingDate" class="booth-acct-form"
data-title="Reading Date"
data-dom-cache="true"
data-theme="a"
data-next="#acctPrintCount"
data-url="acctReadingDate">
<div role="main" class="ui-content">
Reading Date<br />
</div>
</div>
<!-- END READING DATE -->
<!-- BEGIN READING DATE -->
<div data-role="page" id="acctPrintCount" class="booth-acct-form"
data-title="Print Count"
data-dom-cache="true"
data-theme="a"
data-prev="acctReadingDate"
data-next="#acctCash"
data-url="acctPrintCount">
<div role="main" class="ui-content">
Print Count
</div>
</div>
<!-- END READING DATE -->
<!-- BEGIN READING DATE -->
<div data-role="page" id="acctCash" class="booth-acct-form"
data-title="Cash"
data-dom-cache="true"
data-theme="a"
data-prev="#acctPrintCount"
data-next="#acctFree"
data-url="acctCash">
<div role="main" class="ui-content">
Cash
</div>
</div>
<!-- END READING DATE -->
<!-- BEGIN READING DATE -->
<div data-role="page" id="acctFree" class="booth-acct-form"
data-title="Free"
data-dom-cache="true"
data-theme="a"
data-prev="#acctCash"
data-next="#acctCredit"
data-url="acctFree">
<div role="main" class="ui-content">
Free
</div>
</div>
<!-- END READING DATE -->
<!-- BEGIN READING DATE -->
<div data-role="page" id="acctCredit" class="booth-acct-form"
data-title="Credit"
data-dom-cache="true"
data-theme="a"
data-prev="#acctFree"
data-next="#acctShotCount"
data-url="acctCredit">
<div role="main" class="ui-content">
Credit
</div>
</div>
<!-- END READING DATE -->
<!-- BEGIN SHOT COUNT -->
<div data-role="page" id="acctShotCount" class="booth-acct-form"
data-title="Shot Count"
data-dom-cache="true"
data-theme="a"
data-prev="#acctCredit"
data-next="nextForm"
data-url="acctShotCount">
<div role="main" class="ui-content">
ShotCount
</div>
</div>
<!-- END SHOT COUNT -->
</div>
</form>
</body>
</html>
当一个人在屏幕上滑动手指/鼠标时应该触发的不那么复杂的代码......
$(document).one("pagecreate", ".booth-acct-form", function ()
console.log("page created");
$(".ui-content").on("click", function (evt)
console.log("clicked");
);
$(".ui-content").on("swipe", function (evt)
console.log("swiped");
);
$(".ui-content").on("swipeleft", function (evt)
console.log("Swiping left");
);
$(".ui-content").on("swiperight", function (evt)
console.log("Swiping right");
);
);
加载 html 时，“页面已创建”消息会正确发送到控制台窗口，因此我知道该函数正在触发并在正确的时间触发。
我已经将滑动事件绑定到最底部的元素，以避免其他元素取消事件的冒泡出现任何问题（我真的希望它在文档上......但是......调试）。我添加了一个点击事件来验证选择器是否正确以及事件是否通过。它们是，并且点击消息也正在正确发出。
这只是“滑动”事件......它们什么都不做。他们只是坐在那里盯着后面，嘲弄我……表现得好像我没有尝试过“live”、“bind”、“on”以及其他一百万种将它们绑定到元素的方法，就好像我使用了数百个选择器尝试从未发生过。
我受不了了！！必须处理这些滑动事件！他们赢不了！
谢谢你：|
【问题讨论】：
.on("pagecreate", "#pageId", function () $(".ui-content", this).bla bla bla.....
或.on("pagecreate", ".class", function() $(this).find(".ui-content").on(bla bla bla...。
我已经尝试过......使用“on”而不是“one”没有任何区别，并且使用“one”是推荐的方式，因为它只执行一次绑定而不是每页一次...根据演示代码（demos.jquerymobile.com/1.4.5/swipe-page/#&ui-state=dialog）
流程正在成功进入这个“pagecreate”事件函数......它正在处理那里定义的点击事件处理程序......它只是被忽略的滑动事件。
【参考方案1】：
解决方案和问题一样丢人……我的机器昨晚重新启动（显然是例行公事，但计划外发生），现在它可以工作了！！
威士忌探戈狐步舞？
无论如何...感谢所有花时间查看此内容的人。
【讨论】：
以上是关于jQuery Mobile Swipe 事件未触发...的主要内容，如果未能解决你的问题，请参考以下文章
Jquery mobile pagebeforehide Transition事件未触发
Jquery Mobile Swipe 事件导致输入中的文本不可拖动
Gridview 行命令事件未使用 jquery mobile 触发