jquery click/touch events does not work on hybrid app bundled via phonegap

I have developed html + onsenui + jQuery app which is designated to be a hybrid android app (phonegap) but I am facing issues that the layout and click/touch events does not working.

Here is the code:

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

Application should looks like this: appearance in onsenui tutorial tool

but if I bundle the app with phone gap it looks like this: actual appearance on mobile device

I suspect that the whole jquery code does not working on mobile, but in onsenui tutorial tool it works properly. Why the touching events and/or jQuery does not work on mobile device? Thank you