javascript 在 Android 浏览器中使用 JQuery Mobile 添加点击事件处理程序的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6585393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem adding click event handler with JQuery Mobile in Android Browser
提问by Caimen
I am having a strange problem with the android browser. Hopefully this is something I am doing fundamentally wrong and not a JQuery bug. I have tried the following code in Firefox and Chrome which work fine. However when I try it in the Android browser, clicking on the Get Tweets button does not work. It seems to be an issue with JQuery Mobile because when I add the event to a normal non JQuery Mobile object it binds correctly and the console.log fires. I have tried with both alpha and beta versions of JQuery Mobile with no luck.
我在使用 android 浏览器时遇到了一个奇怪的问题。希望这是我从根本上做错的事情，而不是 JQuery 错误。我在 Firefox 和 Chrome 中尝试了以下代码，它们运行良好。但是，当我在 Android 浏览器中尝试时，单击“获取推文”按钮不起作用。这似乎是 JQuery Mobile 的一个问题，因为当我将事件添加到普通的非 JQuery Mobile 对象时，它会正确绑定并且 console.log 会触发。我尝试过 JQuery Mobile 的 alpha 和 beta 版本，但都没有成功。
<!DOCTYPE html>
<html>
<head>
<style type="text/css" rel="stylesheet" >
.chkTag { color: black; }
/*.chkFeed { color: black; }*/
</style>
<link rel="stylesheet" href="twitter/style/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="twitter/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="twitter/js/jquery.mobile-1.0a4.1.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tweetHyman").click(function() {
console.log('test');
});
console.log('page loaded');
});
</script>
<style type="text/css">
.profile img { width: 48px; height: 48px; display: inline; float: left; padding-right: 10px; }
/*.ui-collapsible-contain { max-height: 950px; min-height: 950px; }*/
</style>
</head>
<body>
<div id="page" data-role="page" data-theme="d">
<div id="header" data-role="header">
<h1>Twitter App</h1>
</div>
<div data-role="content">
<div id="1" class="tweetHyman" data-role="collapsible" data-collapsed="true"><h3>Get Tweets</h3><p id="text1"></p><div data-role="collapsible" data-collapsed="true"><h3 date-theme="a">Filter</h3></div></div>
</div>
<div id="footer" data-role="footer">
<a class="tweetHyman"><h2>BT</h2></a>
</div>
</div>
</body>
</html>
This script also fails in android browser only.
此脚本也仅在 android 浏览器中失败。
$('#page').live('pagecreate',function(event){
console.log('page loaded');
$(".tweetHyman").click(function() {
console.log('test');
});
});
回答by Caimen
So it seems I was simply doing it the old fashioned JQuery way when there is actually a JQuery Mobile way of doing these things now. Here is the correct code.
所以看起来我只是用老式的 JQuery 方式来做，而现在实际上有一种 JQuery Mobile 方式来做这些事情。这是正确的代码。
$('#page').live('pagecreate',function(event){
console.log('page loaded');
$(".tweetHyman").live('tap',function(event) {
console.log('test');
});
});
回答by Kevin
JQM seems to intercept clicks, and set the href to '#', which can cause some havoc if you're trying to intercept them. This worked for me, to process the link before JQM gets to it:
JQM 似乎会拦截点击，并将 href 设置为“#”，如果您试图拦截它们，这可能会造成一些破坏。这对我有用，可以在 JQM 到达之前处理链接：
$(document).bind("pageinit", function() {
$("a").bind("click", function(e){ fix_mobile_links(this, e) });
}
