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手机点击应该使用$（文件）.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

你是否尝试过课而不是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 2

尝试更改标题中的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>

让我知道这是否有效。

Answer 3

根据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>

PhoneGap + JqueryMobile点击不是Android模拟器的功能

3 个答案: