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>

应用程序应该看起来像这样：