Phonegap Jquery Mobile 事件不起作用答案

【问题标题】：Phonegap Jquery Mobile events not workingPhonegap Jquery Mobile 事件不起作用
【发布时间】：2015-05-12 14:32:30
【问题描述】：

我已经阅读了很多讨论，但仍然不明白我的问题。我想要的只是通过单击它来禁用按钮。这是一个示例应用程序，我希望按钮单击/点击事件在其中起作用。

头：

 <meta http-equiv="Content-Security-Policy"
      content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>


<link rel="stylesheet" href="./jqm/jquery.mobile-1.4.5.min.css">
<script src="./jq/jquery-1.11.3.min.js"></script>
<script src="./jqm/jquery.mobile-1.4.5.min.js"></script>

主体：

<div data-role="page" id="pageone">
<div data-role="header">
    <h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">
    <p>Click on the link to see what data-transition="none" does.</p>
    <a href="#pagetwo" data-transition="none">Go to Page Two (no effect added)</a>
</div>

<button id="btn1" class="ui-btn">Button</button>
<button id="btn2" class="ui-btn">Button2</button>    

<div data-role="footer">
    <h1>Footer Text</h1>
</div>

srcipt 在结束 body 标记之前。我也尝试将它放在前端：

$(document).on("pageinit", "#pageone", function () {

    $("#btn2").on("tap", function(e) {
        $('#btn2').button({disabled: true});
    });
});

事件在桌面浏览器中起作用，但是当我启动模拟器时 - 事件并不能全部起作用。

【问题讨论】：

标签： android html cordova jquery-mobile

【解决方案1】：

jQM 按钮小部件用于<INPUT> 元素。在这种情况下，您可以使用 disable 方法：

<input id="btn3" type="button" value="Button3" />

$("#btn3").on("tap", function (e) {
    $('#btn3').button("disable");
});

对于像你这样的<BUTTON>元素，只需使用常规jQuery设置按钮的禁用属性：

$("#btn2").on("tap", function (e) {
    $('#btn2').prop("disabled", true);
});

工作DEMO

【讨论】：