Phonegap Android：添加 jQuery Mobile 时 jQuery 按钮不起作用答案

【问题标题】：Phonegap Android: jQuery buttons not working when adding jQuery MobilePhonegap Android：添加 jQuery Mobile 时 jQuery 按钮不起作用
【发布时间】：2013-07-19 18:39:06
【问题描述】：

我有一个 HTML5 应用程序，我使用 Eclipse 将其编译为 Android 项目，从 /assets/www 文件夹加载它。

我使用 PhoneGap Media 类和 jQuery (1.8.3) 加载一些音频，如下所示：

//Javascript

$(document).ready(function() {
        $(".bt_play").click(function(event) {

            var audio_file = $(this).attr('href');
            playAudio('/android_asset/www/audio/' + audio_file);

            return false;
        });

    });

var my_media = null;

    function playAudio(url) {
        my_media = new Media(url, success, fail);
        my_media.play();
    }

//HTML

<a href="myAudio.mp3" class="bt_play">PLAY</a>

如果我不包含 jQuery Mobile，上面的代码可以完美运行，它会播放音频文件。但是，如果我包含 jQuery Mobile 库（版本 1.3.1），甚至没有更改代码中的任何其他内容，当我单击该链接而不是播放音频时，它会显示 Error loading page 消息.

我尝试使用 jQuery Mobile 特定功能来准备文档$(document).on('pageinit', function() { ... }); 而不是 jQuery，但我仍然遇到同样的错误。

关于为什么会发生这种情况的任何想法？

【问题讨论】：

删除.ready和return false，点击后添加event.preventDefault。我还推荐使用 jquery 1.9.1
另外，为按钮添加data-ajax="false"属性。
@Omar 感谢您的回复。当您说“删除.ready”时，这是否意味着我应该将“click”事件处理程序放在那里而不等待任何其他文档（或页面或对象）“ready”事件？
您可以将其替换为pageinit 或pageshow，使用JQM 事件，因为ready 不应与JQM 一起使用。另外，按钮是动态插入 DOM 还是静态插入？
@Omar 它们是静态插入的。包含这些的页面不是初始页面。从初始页面我调用这个页面（使用常规），在这里我播放音频

标签： jquery-mobile cordova

【解决方案1】：

一个想法可能听起来很愚蠢，更多尝试或放置一个 pagebeforecreate 而不是 pageinit 或将调用放在一个函数上以在 onclick 中调用？

我在使用这个版本的 JqueryMobile 时遇到了很多问题，我将所有调用都放在 onclick 中，因为 live 不起作用...

【讨论】：

我尝试使用 pagebeforecreate 和 onclick 仍然是同样的问题...好吧，使用 onclick 我没有没有出错，什么也没发生
live 自 jquery 1.7 起被替换为 .on

【解决方案2】：

我使用 Omar 的建议解决了：

使用$(document).on('pageshow',...)}; 而不是.ready()
在click() 事件中使用event.preventDefault 并删除return
在将用户带到此页面的链接中禁用 AJAX 导航，在 <a> 标签中使用 data-ajax="false"

【讨论】：