jQuery Mobile的和刷卡JS不兼容导致选择列表中不工作在Android中不、不兼容、列表、工作
我使用jQuery与swipejs结合移动1.0。所述 swipejs 的库被用于允许在图像转盘移动扫动手势。不过，我已经在Android 2.2.3（摩托罗拉Droid）和其他Android设备遇到一个问题，即选择列表（在同一页面swipejs上）根本不工作。选择列表中出现，但本机选项菜单的不弹出，点击他们干脆什么都不做。我能够不仅它缩小到swipejs，还要swipejs内的特定行。
style.webkitTransform ='translate3d（'+ - （指数* this.width）+'像素，0,0）';
看来，transalate3d CSS的行为在某种程度上使用jQuery Mobile选择列表干扰。我发现了jQuery Mobile的选择列表在Android上的脆弱性（https://github.com/jquery/jquery-mobile/issues/1051）的大量报道。并已能够创建一个相当简单的示例页面展品此行为。我的修复是改变translate3d在swipejs库本身的翻译。但我想知道，如果有人有更好地了解translate3d做，以及如何，可能影响jQuery Mobile的也许能够proprose一个更好的解决方案，或与JQM或swipejs这一个错误？
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8/＆GT;
＆LT;冠军＆GT;＆LT; /标题＆GT;
＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模为1，最大规模= 1＆GT;
＆LT; META NAME =苹果移动网络应用能力的内容=是/＆GT;
＆LT; META NAME =苹果移动网络应用程序状态栏式CONTENT =黑/＆GT;
＆LT;链接相对=苹果触摸图标的href =/图片/移动/ homeIcon.png/＆GT;
＆LT;链接相对=苹果触摸启动图像的href =/图片/移动/ splash.png/＆GT;
＆LT;链接HREF =HTTP：//$c$c.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css相对=样式类型=文本/ CSS/ ＆GT;
＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-1.6.4.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
（文档）$ .bind（mobileinit，函数（）{
$ .mobile.ajaxEnabled = FALSE;
}）;
＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTP：//$c$c.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT ;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV数据角色=页面ID =主＆GT;
＆LT;头数据角色=头＆GT;
＆LT; /头＆GT;
＆LT; DIV数据角色=内容＆GT;
＆LT; DIV数据角色=fieldcontain＆GT;
＆LT;标签=选择选择题-1＆GT;
送货方式：LT; /标签＆gt;
＆LT;选择名称=选择 - 选择 - 0ID =选择选择题-1的数据主题=一个＆GT;
＆LT;期权价值=标准＆GT;标准：7天＆LT; /选项＆GT;
＆LT;期权价值=抢＆GT;拉什：3天＆LT; /选项＆GT;
＆LT;期权价值=EX preSS＆GT;防爆preSS：第二天＆LT; /选项＆GT;
＆LT;期权价值=一夜成名干燥过夜＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =divProductImagesCarousel＆GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =image_0.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_0.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_1.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_1.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_2.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_2.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_3.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_3.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_4.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_4.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_5.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_5.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_6.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_6.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_7.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_7.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_8.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_8.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =image_9.jpg＆GT;
＆LT; IMG WIDTH =250HEIGHT =250SRC =image_9.jpgALT =产品形象的风格=缘右：50px的; /＆GT;
＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本SRC =https://raw.github.com/bradbirdsall/Swipe/master/swipe.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
变种productImagesCarousel =的document.getElementById（'divProductImagesCarousel'）;
window.mySwipe =新的刷卡（productImagesCarousel）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案 
您不要使用jQuery Mobile的时候不需要刷卡库。你可以注册事件处理程序的 swipeleft 和 swiperight 事件：
$（文件）.delegate（'＃divProductImagesCarousel'，'swipeleft swiperight'，函数（事件）{
警报（你只是'+ Event.type访问+编！）;
}）;
I'm using jquery mobile 1.0 in combination with swipejs. The swipejs library is being used to allow for mobile swipe gesture on a image carousel. However, I've encountered an issue on Android 2.2.3 (Motorola Droid) and other Android devices where select lists (on the same page as swipejs) simply don't work. The select lists appear but the native options menu's don't pop up, clicking them simply does nothing. I was able to not only narrow it down to the swipejs, but also to a particular line within swipejs.
style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
It appears that the transalate3d css behavior somehow interferes with jquery mobile select lists. I've found numerous reports of the fragility of jquery mobile select lists on Android (https://github.com/jquery/jquery-mobile/issues/1051 ). And have been able to create a fairly simple sample page the exhibits this behavior. My fix was to alter the translate3d to translate in the swipejs library itself. But I'm wondering if someone with a better understanding of what translate3d does and how that might effect jquery mobile might be able to proprose a better solution or is this a bug with jqm or swipejs?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/images/mobile/homeIcon.png" />
<link rel="apple-touch-startup-image" href="/images/mobile/splash.png" />
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="main">
<header data-role="header">
</header>
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-1">
Shipping method:</label>
<select name="select-choice-0" id="select-choice-1" data-theme="a">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div id="divProductImagesCarousel">
<ul>
<li><a href="image_0.jpg">
<img width="250" height="250" src="image_0.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_1.jpg">
<img width="250" height="250" src="image_1.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_2.jpg">
<img width="250" height="250" src="image_2.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_3.jpg">
<img width="250" height="250" src="image_3.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_4.jpg">
<img width="250" height="250" src="image_4.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_5.jpg">
<img width="250" height="250" src="image_5.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_6.jpg">
<img width="250" height="250" src="image_6.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_7.jpg">
<img width="250" height="250" src="image_7.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_8.jpg">
<img width="250" height="250" src="image_8.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_9.jpg">
<img width="250" height="250" src="image_9.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
</ul>
</div>
</div>
</div>
<script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var productImagesCarousel = document.getElementById('divProductImagesCarousel');
window.mySwipe = new Swipe(productImagesCarousel);
});
</script>
</body>
</html>
解决方案
You don't need a swipe library when using jQuery Mobile. You can register event handlers to the swipeleft and swiperight events:
$(document).delegate('#divProductImagesCarousel', 'swipeleft swiperight', function (event) {
alert('You just ' + event.type + 'ed!');
});
