JQuery mobile v1.2 javascript事件在弹出窗口中不起作用

Question

我正在使用 JQuery Mobile 1.2 和 php 开发 Web 应用程序。在个人资料页面上，我有一个弹出窗口要求用户确认注销。我想要做的是通过点击事件拦截该按钮以通过 ajax 请求处理注销。

我的所有项目页面中都包含一个 custom.js 文件。该应用程序在帐户页面中加载。我知道它正在加载并在 ajax 导航中工作。 当我将此代码包含在 custom.js 中时：

$("#perfil").live('pageshow',function(event){
    alert('This page was just enhanced by jQuery Mobile!'); 
});

我在显示个人资料页面时收到警报。问题是点击功能。

当我包含这个时：

$("#perfil").live('pageshow',function(event){
    alert('This page was just enhanced by jQuery Mobile!'); 

    $('#logoutButton').click(function(){
        $('#output').html('Logging Out...');
        $.get("api/logout",function(data){
            if(data.success) {
                window.location = "index"
            }
            else{
                $('#output').html('Logout failed. Try again');
            }
            }, "json");
    });

});

行为很奇怪。当我从主页导航到个人资料页面时，我收到了警报。但是按钮没有反应。但是，当我刷新（或最初从配置文件页面加载应用程序）时，按钮行为正确并运行 javascript 注销功能。

这里是html按钮的代码：

<a id="logoutButton" data-role="button" data-icon="check" 
      data-inline="true" data-theme="e">Si, finalizar.</a>   

Answer 1

您的 个人资料页面 上的 custom.js 并未实际加载（更多内容见下文），因此当您绑定点击事件时，您的按钮在 DOM 中不存在，例如，您可以通过使用事件委托来解决此问题

$(document).on('click', '#logoutButton', function(){
        $('#output').html('Logging Out...');
        $.get("api/logout",function(data){
            if(data.success) {
                window.location = "index"
            }
            else{
                $('#output').html('Logout failed. Try again');
            }
            }, "json");
    });

现在你的 custom.js 没有被加载的原因是，默认情况下，当你在 jQuery Mobile 中加载页面时，default behavior 是通过 ajax 仅加载 data-role="page" div 并将其附加到 DOM当前页面。要意识到的重要部分是只有 div 页面 被加载，而 不 该页面上的任何其他资源。

如果您想加载单独页面上的自定义脚本，您需要将其包含在 div data-role="page" 包装器中。您还可以通过在链接上使用data-ajax="false" 属性（或rel="external"，如果它是不同的域）来告诉JQM 完全加载没有ajax 的页面。

顺便说一句，您应该考虑使用 .on 而不是 .live 从 jQuery 1.7 开始，.live 一直是 depreciated。

Answer 2

在 JQM 中，这一切都取决于您的数据如何初始化以及页面的结构。

在加载您的主页时，所有脚本都会初始化一次，并为“Ajax”（如响应和感觉）缓存。

如果您的主页和个人资料页面采用多页格式，则您的点击按钮不会成为问题，因为脚本会被初始化一次。

或者，如果您在单个页面中，则从主页面到个人资料页面的 rel="external" 将起作用。外部链接将强制 JQM 发出新的 HTTP 请求；但是，您会做松散的页面过渡效果。

我相信更好的架构是创建单个 JQM 页面并使用注销按钮 注销作为绑定功能。

*如何绑定你的点击功能：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

Source