1

我在用

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

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

4

3 回答 3

1

您是否尝试过使用 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');
 });
于 2012-09-05T06:04:46.830 回答
1

尝试在标头中更改 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>

让我知道这是否有效。

于 2012-09-05T07:06:32.980 回答
-1

根据 phonegap文档，您应该先听此事件：

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>
于 2012-09-05T01:09:32.770 回答