jQuery / JavaScript OnClick事件未在移动设备上触发

Question

I'm currently creating an app using the Cordova library from PhoneGap. 我目前正在使用PhoneGap的Cordova库创建一个应用程序。 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. 现在，当在Chrome上测试代码时，一切正常，但是当我将其部署到Android时，除按钮外，所有其他onclick事件均停止工作。

In the code below you'll see the on which I add an eventlistenener using Jquery. 在下面的代码中，您将看到使用Jquery在其上添加eventlistenener的代码。

I have no clue as to why it doesn't fire the onclick events on my Nexus. 我不知道为什么它不触发Nexus上的onclick事件。 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 类似的问题： onClick无法在移动设备上运行（触摸） -jQuery onclick无法在移动设备上运行 -Android / Phonegap-onClick（）无法运行

This is just a section from the index.html 这只是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) 这是我用于锁屏页面的代码：（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"});
});});

Answer 1

The problem lies with android 4.3 and lower. 问题出在android 4.3及更低版本。

When testing on Android 4.4+, I do not have this issue. 在Android 4.4+上进行测试时，我没有这个问题。

Further investigating why it happens. 进一步调查其发生原因。

Answer 2

Try this 尝试这个

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

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

Answer 3

Maybe the DOM is not ready when you attach the events. 附加事件时，DOM可能尚未准备好。 Have you tried loading the scripts at the bottom of the page? 您是否尝试过在页面底部加载脚本？ This might fix the issue and also improve your application's performance. 这可能会解决问题，也可以提高应用程序的性能。

Answer 4

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: 我对Phonegap不太了解，但是关于移动设备上的触摸事件，我知道您需要注意以下几点：

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. 检查元素的z-index属性，当一个元素在另一个元素内时，触摸事件可能被容器元素拦截。 You can just set, in your css, the z-index property of the element to be touched higher than other ones. 您可以在CSS中将要触摸的元素的z-index属性设置为高于其他元素。
Prevent default touch action by "touch-action: none;" 通过“ touch-action：none;”阻止默认的触摸操作 in your css. 在你的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. 如果您使用的是Chrome，则只需使用工具>检查设备和运行android adb的Chrome for Desktop即可调试移动网络应用。

jQuery / JavaScript OnClick事件未在移动设备上触发

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-03-24 12:07:50

解决方案2
1 2015-03-12 17:37:23

解决方案3
0 2015-03-12 11:29:33

解决方案4
0 2015-03-12 11:59:22

jQuery / JavaScript OnClick事件未在移动设备上触发

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-03-24 12:07:50

解决方案2 1 2015-03-12 17:37:23

解决方案3 0 2015-03-12 11:29:33

解决方案4 0 2015-03-12 11:59:22

解决方案1
2 已采纳 2015-03-24 12:07:50

解决方案2
1 2015-03-12 17:37:23

解决方案3
0 2015-03-12 11:29:33

解决方案4
0 2015-03-12 11:59:22