2

我正在使用 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>
4

2 回答 2

2

您的个人资料页面上的 custom.js没有实际加载（更多内容见下文），因此当您绑定 click 事件时，您的按钮在 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 中加载页面时，默认行为是仅data-role="page"通过 ajax 加载 div 并将其附加到当前页面的 DOM。要实现的重要部分是只有div 页面被加载，而不是该页面上的任何其他资源。

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

顺便说一句，您应该考虑使用.on而不是.livejQuery 1.7.live已贬值。

于 2012-12-05T20:09:09.253 回答
0

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

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

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

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

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

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

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

来源

于 2012-12-05T19:35:45.600 回答