【问题标题】:jQuery Mobile 1.1.0 RC1 Modifying HREF for AJAX Posts in iOS SafarijQuery Mobile 1.1.0 RC1 在 iOS Safari 中修改 AJAX 帖子的 HREF
【发布时间】:2012-04-10 11:50:25
【问题描述】:

免责声明:我使用的 jQuery Mobile 1.1.0 RC1 还不是一个稳定的版本。我有一个需要发布 AJAX 请求并返回 JSON 响应的链接,但是当单击该链接时,似乎 jQuery Mobile 在 iPhone 上的 iOS Safari 中将 HREF 更改为哈希 (#)。在使用 iPhone 用户代理在浏览器中进行测试时,它不会这样做。这是我的基本 HTML 和 JS 来展示我所拥有的:

<a href="/link/to/ajaxpost/">Send Ajax Request</a>

和 JS

$('#tab a').on('click', function(e){
        var $this = $(this);
        var jsonUrl = $this.attr("href");
        alert(jsonUrl);

        $.mobile.showPageLoadingMsg();

        $.ajax({
            type: "POST",
            url: jsonUrl,
            success: function(data) {
                $.mobile.hidePageLoadingMsg();
                alert(data);
            }
        });
        return false; 
});

“jsonUrl”的值变为“#”(而不是我的 ajax 请求的 url),然后 data 变量的值返回整个页面,而不是我想要的 JSON 提要。奇怪的是,这只发生在 iPhone 上的 iOS Safari 中。当我在 OSX Safari 或 Firefox 中使用不同的用户代理尝试 jQuery Mobile 站点时,它工作正常并且 JSON 提要返回。

我尝试将 rel="external" 和 data-type="ajax" 添加到链接中,但没有解决。我也在使用 jQuery Mobile 1.1.0 RC1,但我不确定这是否是问题所在,或者我只是没有正确使用 jQuery Mobile。我的代码中也没有任何其他 jQuery Mobile 特定的 JS,所以也许我错过了一些可以解决这个问题的东西。感谢您的帮助。

【问题讨论】:

  • 我知道我可以将链接的 URL 放在数据属性中,然后用 jQuery 调用它,但必须有更好的方法来做到这一点。我不想为每个链接都输入数据属性。
  • 也试过 $(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; });但没有运气
  • 我无法复制您的问题。 jsfiddle.net/sDh4k/3
  • @r0m4n 谢谢!你只是提醒我尝试不同版本的 jQuery Mobile,因为我使用的是 RC1.1。我发现该错误仅发生在最新版本中,而不发生在现有稳定版本中:此示例使用 jQuery Mobile 1.0.1 并适用于 iOS Safari(您的 jsfiddle):jsfiddle.net/sDh4k/3 这使用 1.1.0 RC1 并替换 HREF在 iOS Safari 中使用哈希,这会破坏 AJAX 帖子:jsfiddle.net/sDh4k/6
  • 不确定发生了什么,但也许 jQuery Mobile 忽略了 rel="external" 或任何其他方法来单独保留链接?如果我将事件更改为 vclick (jsfiddle.net/sDh4k/8) 它会起作用,那么将其用作点击事件的解决方案是吗?或者有更好的方法吗?

标签: jquery iphone ios mobile jquery-mobile


【解决方案1】:

代替:

$this.attr('href')

使用这个:

$this.data('href') || $this.attr('href')

jQuery Mobile 1.1.0RC1 及更高版本(包括已发布的 1.1.0)将在单击时将 href 设置为指向 # 的任何链接,并将 href 存储在 data-href 属性中,直到完成操作,然后放回去。 它只在 iOS Mobile Safari 上这样做。

我已经在博客上写了更多关于此的内容,其中包含相关 github 问题讨论的链接以及有关在此处将其与 Ruby on Rails jQuery UJS 应用的一些信息:

http://scottwb.com/blog/2012/06/29/jquery-mobile-breaks-your-hrefs-on-ios-mobile-safari/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多