PhoneGap + JqueryMobile 点击不适用于 android 模拟器

Question

我正在使用

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>

当我使用浏览器进行测试时，我可以单击 div，但如果我在我的 android 模拟器 4.0 中尝试它，它不会显示任何响应。我看了网上资料说jquery mobile click应该使用$(document).live('click',function()..) 而我的代码是

<div data-role="content">             
        <p><img level='1' src="css/images/level1.png"/><a id="level" level="1" href="wordlist.html" data-role="button" data-theme="a">Home</a></p>
        <p><img level='2' src="css/images/level2.png"/><a id="level" level="2" href="wordlist.html" data-role="button" data-theme="a">School</a></p>
        <p><img level='3' src="css/images/level3.png"/><a id="level" level="3" href="wordlist.html" data-role="button" data-theme="a">Restaurant</a></p>

</div>

<script type="text/javascript" charset="utf-8">
$('a#level').live('click', function () {
    alert("XX"+ $(this).attr("level"));
    sessionStorage.StudyLevel = $(this).attr("level"); 
});
</script>

我的浏览器中显示了警报，但我的模拟器中没有任何反应。其他未在我的模拟器中执行的滑动和点击事件也是如此。我错过了什么吗？

Answer 1

根据 phonegap documentation 你应该先听这个事件：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use the Cordova API
    // Put your code here
}

对于事件附件，您可以使用（推荐）jquery .on()

您的 imgs 也有重复的 id，不建议这样做。您可以使用虚拟类并搜索它，例如：

<div data-role="content">             
        <p><img level='1' src="css/images/level1.png"/><a id="level1" level="1" class="handler" href="wordlist.html" data-role="button" data-theme="a">Home</a></p>
        <p><img level='2' src="css/images/level2.png"/><a id="level2" level="2" class="handler" href="wordlist.html" data-role="button" data-theme="a">School</a></p>
        <p><img level='3' src="css/images/level3.png"/><a id="level3" level="3" class="handler" href="wordlist.html" data-role="button" data-theme="a">Restaurant</a></p>

</div>

<script type="text/javascript" charset="utf-8">
$('a.handler').on('click', function () {
    alert("XX"+ $(this).attr("level"));
    sessionStorage.StudyLevel = $(this).attr("level"); 
});
</script>

Answer 2

您是否尝试过使用 class 而不是 id：-

<div data-role="content">             
    <p><img level='1' src="css/images/level1.png"/><a id="level1" class='selCls' level="1" class="handler" href="wordlist.html" data-role="button" data-theme="a">Home</a></p>
    <p><img level='2' src="css/images/level2.png"/><a id="level2" class='selCls'  level="2" class="handler" href="wordlist.html" data-role="button" data-theme="a">School</a></p>
    <p><img level='3' src="css/images/level3.png"/><a id="level3" class='selCls'  level="3" class="handler" href="wordlist.html" data-role="button" data-theme="a">Restaurant</a></p>

还有

 $('body').on('click', '.selCls', function(e) {
  e.preventDefault();
      e.stopImmediatePropagation();
      alert('clicked');
 });

Answer 3

尝试更改 jquery 文件中标头中的顺序

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function() {
   $('a#level').bind('click', function(event, ui) {
     //code here.
   });
});
</script>

让我知道这是否有效。