Jquery/JavaScript OnClick event not firing on Mobile Devices

Question

I'm currently creating an app using the Cordova library from PhoneGap. Now while testing the code out on Chrome, everything works but when I deploy it to Android, all the onclick events on everything except for buttons cease to work.

In the code below you'll see the on which I add an eventlistenener using Jquery.

I have no clue as to why it doesn't fire the onclick events on my Nexus. I've searched similar questions thoroughly and yet none offered a working answer.

Similar questions: onClick not working on mobile (touch) -- jQuery onclick not working on mobile --Android/ Phonegap - onClick() not working

This is just a section from the index.html

   <html>
    <head>

        <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>      
        -->

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

        <script type="text/javascript" src="script/jquery/jquery-1.11.2.min.js"></script>
        <link rel="stylesheet" href="script/jquery/jquery.mobile-1.4.5.css"/>

        <script type="text/javascript" src="script/jquery/jquery.mobile-1.4.5.js"></script>

        <link rel="stylesheet" href="theme/MakeMyOutfit.css">
        <link rel="stylesheet" href="theme/MakeMyOutfit.min.css">

        <script type="text/javascript" src="script/Datebox/DateBox.js"></script>
        <link rel="stylesheet" href="script/DateBox/jqm-datebox-1.4.5.css">

        <link rel="stylesheet" href="theme/theme.css">
        <script type="text/javascript" src="script/menu.js"></script>
        <script type="text/javascript" src="script/lockscreen.js"></script>
        <script type="text/javascript" src="script/wardrobe.js"></script>
        <script type="text/javascript" src="script/clothing.js"></script>
        <script type="text/javascript" src="script/addUser.js"></script>
        <script type="text/javascript" src="script/JsonDb.js"></script>
        <script type="text/javascript" src="script/takePicture.js"></script>

        <title>Make My Outfit</title>
    </head>
    <body>
        <div data-role="page" id="lockscreen">
            <header>
                Make My Outfit
            </header>
            <section id="lockscreen-content" data-role="content" >
                <div class="lockscreen-profile">
                    <div class="lockscreen-profile-top">
                        <div class="lockscreen-profile-top-picture"></div>
                        <div class="lockscreen-profile-top-name">X</div>
                    </div>
                    <div class="lockscreen-profile-login">
                        <input type="password" name="password" class="txt password" value="" />
                        <a href="#" class="btn lockscreen-profile-login-button"  data-user-id="1">Aanmelden</a>
                    </div>
                </div>

                <div class="lockscreen-profile" >
                    **<div class="lockscreen-profile-top">**
                        <div class="lockscreen-profile-top-picture"></div>
                        <div class="lockscreen-profile-top-name">Y</div>
                    </div>
                    <div class="lockscreen-profile-login">
                        <input type="password" name="password" class="txt password" value="" />
                        <a href="#" class="btn lockscreen-profile-login-button" data-user-id="2">Aanmelden</a>
                    </div>
                </div>

                <a href="#addUser" id="btnAddUser" class="lockscreen-profile">
                    <div class="lockscreen-profile-top-picture"></div>
                    <div class="lockscreen-profile-top-name">Gebruiker toevoegen</div>

                </a>

            </section>
        </div>
</body>
</html>

This is the code I use for the lockscreen page: (lockscreen.js)

var selectedUserId;


$( document ).on( "pageinit", "#lockscreen" ,function() {
    $(".lockscreen-profile-top").on('touchstart click', function(){
    var e = $( this ).parent();
    if (!e.hasClass("open"))
    {
        e.addClass("open"); 
        //$( this ).next().children(".password:first").focus();
    }
    else
    {e.removeClass("open");}
});


/*
    BUG: dit event wordt 2 keer gefired
    GEVOLG: de selectedUserId wordt onmiddelijk terug op null gezet.
    OPLOSSING: event unbinden (.off()) en daarna terug binden

    FIXED
*/
$(".lockscreen-profile-login-button").on('touchstart click', function(){
    selectedUserId = $(this).attr("data-user-id");
    console.log(selectedUserId);
    $.mobile.navigate( "#home", {transition: "flow"});
});});

Does anything happen during release to android that may change/'break' those paths? — , Mar 12 '15 at 11:23
You mean the linking between scripts? Other pieces of code seem to work just fine on the page, it's only the Onclick that are messing up somehow. — Jeffrey Devloo, Mar 12 '15 at 11:29

score 2 · Accepted Answer · answered Mar 24 '15 at 12:07

2

The problem lies with android 4.3 and lower.

When testing on Android 4.4+, I do not have this issue.

Further investigating why it happens.

answered Mar 24 '15 at 12:07

Jeffrey Devloo

1,406
1
11
20

Crosswalk is a plugin that can be used to emulate newer browser version instead of relying on the older ones from older models. Installing crosswalk fixed my issue. – Jeffrey Devloo Nov 17 '15 at 14:05

score 1 · Answer 2 · answered Mar 12 '15 at 17:37

1

Try this

$(document).on('click', ".lockscreen-profile-login-button",function () {

      selectedUserId = $(this).attr("data-user-id");
      console.log(selectedUserId);
      $.mobile.navigate( "#home", {transition: "flow"});
});

answered Mar 12 '15 at 17:37

AtanuCSE

8,832
14
74
112

score 0 · Answer 3 · answered Mar 12 '15 at 11:29

0

Maybe the DOM is not ready when you attach the events. Have you tried loading the scripts at the bottom of the page? This might fix the issue and also improve your application's performance.

answered Mar 12 '15 at 11:29

Ernesto Hegi

333
3
3

score 0 · Answer 4 · answered Mar 12 '15 at 11:59

I don't know much about Phonegap, but about touch events on mobile i know you have to take care of a couple of things:

Check the z-index property of your elements, when you have elements one inside another it could be that the touch event is intercepted by the container element. You can just set, in your css, the z-index property of the element to be touched higher than other ones.
Prevent default touch action by "touch-action: none;" in your css.

If you're using Chrome you can simply debug your mobile webapp by Chrome for Desktop with tools>inspect devices and the android adb running.

Jquery/JavaScript OnClick event not firing on Mobile Devices

4 Answers4