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

，當我與我的瀏覽器中測試我可以點擊格，但如果我在Android模擬器4.0試了一下，並沒有表現出任何反應。我看網上消息稱，jQuery Mobile的點擊要使用的$（document）.live（「點擊」，（）的函數..），我的代碼是在我的瀏覽器

<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，那不是recomended。您可以使用一個虛擬的類並搜索，而不是像：

<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

你有沒有試着用類而不是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> 

讓我知道這是否有效。