jquery点击/触摸事件不适用于通过电话捆绑的混合应用程序
问题描述:
我开发了被指定为混合Android应用程序(phonegap)的html + onsenui + jQuery应用程序,但我面临的问题是布局和点击/触摸事件不起作用。jquery点击/触摸事件不适用于通过电话捆绑的混合应用程序
下面是代码:
<!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不适用于移动设备?谢谢
答
问题是,我只index.html的,无项目结构,配置文件等
我试图去莫尼卡云,创建了一个最小功能onsenui项目,并取代JavaScript代码矿,用他们的工具构建apk,现在一切正常,布局如预期,并且攻丝也是功能性的。希望对那些认为你可以从一个html文件构建apk的人有所帮助,你需要所有的项目结构才能使它工作!
有没有可能是由jQuery和onsenui的CDN版本引起的问题? – radicz