0
ハイブリッドアンドロイドアプリ（phonegap）に指定されているhtml + onsenui + jQueryアプリを開発しましたが、レイアウトとクリック/イベントは機能しません。ここでjqueryのクリック/タッチイベントは、phonegapでバンドルされたハイブリッドアプリでは機能しません
はコードです：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script>
function showModal() {
var modal = document.querySelector('ons-modal');
modal.show();
var i = 1
var myTimer = setInterval(function(){
$("#message").html(i);
if (i <= 30){
i += 1;
}
}, 1000);
setTimeout(function() {
modal.hide();
clearInterval(myTimer);
$("#message").html("");
ons.notification.toast({message: "Now you are free to open/close again.", timeout: 2000});
}, 30000);
}
$(function(){
$('#btn-outdoor-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
});
$('#btn-indoor-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
});
$('#btn-both-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
ons.notification.toast({message: '5 seconds delay before another switch', timeout: 3000});
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000})
}
});
setTimeout(function(){
$.ajax({
url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
}, 5000);
});
});
</script>
</head>
<body style="font-family: monospace;">
<ons-page>
<div id="btn-outdoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #0F2043; color: white;">
<h2>Outer</h2>
<ons-ripple></ons-ripple>
</div>
<div id="btn-indoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #79CEDC;">
<h2>Inner</h2>
<ons-ripple></ons-ripple>
</div>
<div id="btn-both-open" style="height: 33.34%; text-align: center; padding-top: 17%; background-color: #D5A458;">
<h2>Both</h2>
<ons-ripple></ons-ripple>
</div>
</ons-page>
<ons-modal direction="up">
<div style="text-align: center">
<p>
Operation takes 30 seconds to finish<br><br>
<ons-icon icon="md-spinner" size="28px" spin></ons-icon><br><br>
<span id="message"></span><br><br>
</p>
</div>
</ons-modal>
</body>
</html>
アプリケーションは次のようになります必要があります。
が、私はそれがこのようになります電話ギャップのアプリバンドル場合：
を私は疑いますjqueryコード全体がモバイル上で動作しないことを確認しますが、onsenuiチュートリアルツールでは正しく動作します。タッチイベントやjQueryがモバイルデバイス上で動作しないのはなぜですか？問題は、私は、モナカクラウドに移動しようとした最小機能onsenuiプロジェクトを作成し、鉱山にJavaScriptコードを置き換えるだけのindex.html、ノープロジェクト構造、設定ファイルなど
を持っているということでしたあなたに
jqueryとonsenuiのCDNバージョンによって問題が発生する可能性はありますか？ – radicz