jQuery / JavaScript OnClick事件未在移動設備上觸發

Question

我目前正在使用PhoneGap的Cordova庫創建一個應用程序。 現在，當在Chrome上測試代碼時，一切正常，但是當我將其部署到Android時，除按鈕外，所有其他onclick事件均停止工作。

在下面的代碼中，您將看到使用Jquery在其上添加eventlistenener的代碼。

我不知道為什么它不觸發Nexus上的onclick事件。 我已經徹底搜索了類似的問題，但沒有一個提供有效的答案。

類似的問題： onClick無法在移動設備上運行（觸摸） -jQuery onclick無法在移動設備上運行 -Android / Phonegap-onClick（）無法運行

這只是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>

這是我用於鎖屏頁面的代碼：（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

問題出在android 4.3及更低版本。

在Android 4.4+上進行測試時，我沒有這個問題。

進一步調查其發生原因。

Answer 2

嘗試這個

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

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

Answer 3

附加事件時，DOM可能尚未准備好。 您是否嘗試過在頁面底部加載腳本？ 這可能會解決問題，也可以提高應用程序的性能。

Answer 4

我對Phonegap不太了解，但是關於移動設備上的觸摸事件，我知道您需要注意以下幾點：

檢查元素的z-index屬性，當一個元素在另一個元素內時，觸摸事件可能被容器元素攔截。 您可以在CSS中將要觸摸的元素的z-index屬性設置為高於其他元素。
通過“ touch-action：none;”阻止默認的觸摸操作 在你的CSS。

如果您使用的是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