2

不久前，我开始使用 JqueryMobile，并且正在尝试使我的网站适应移动设备。

我正在使用 ASP.NET Mvc，我的页面结构是这样的：

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")
    @Scripts.Render("~/bundles/jqueryflexslider")
</head>

<body>
    <div data-role="page" data-theme="a">
        @RenderBody()
    </div>
</body>
</html>

问题是在我的布局页面中，我有一个带有简单 jquery 函数的局部视图，它可以为我的菜单设置动画，点击时向上/向下滑动。当我重新加载页面时它工作正常，但是当我点击后退按钮时它不再工作了，但如果我再次点击刷新voialaaa，它的工作原理。

我阅读了有关“头部脚本和样式”的 jquery 移动文档，它说

..导航系统的默认行为是使用该链接的href 来制定Ajax 请求（而不是允许浏览器的默认链接行为请求该href 并加载整个页面）。当该 Ajax 请求发出时，框架将接收其整个文本内容，但它只会注入响应的主体元素的内容（或者更具体地说，如果提供了 data-role="page" 元素）

我的问题是我如何重新加载内容并让我的脚本正常工作（假设问题是重新加载的事情）如果没有，有人可以指出我的方向或这种情况下的最佳结构是什么？

4

1 回答 1

2

我终于让它工作了！

我的问题是，每次我从一个页面导航到另一个页面时，我的<div id="page" data-role="page">都是重复的。由于我在 DOM 上有两个页面和同一个菜单的两个 IDS，因此单击简单不再起作用。一旦我在负责将我重定向到另一个页面的链接上添加了 data-ajax='false'，我的页面像往常一样重新加载，最后我不再有重复的 div、IDS，现在一切都运行得完美无缺。

除非您另有说明，否则 JQuery Mobile 使用 AJAX 导航。ASP.NET 重定向对正常请求没有问题，但会导致 AJAX 出现问题。所以我的答案是关闭 AJAX。为此，您所要做的就是将属性 data-ajax='false' 添加到标签中。

就我而言，一个简单的解决方案可能是（因为更改每个 Html.ActionLink/Url.Action 非常耗时），将其添加到 _Layout.cshtml 的末尾（就在关闭“body”标签之前）。

 $(document).on('pageinit', function() {
      $('a').each(function() {
      $(this).attr("data-ajax", "false");
     });
  });

假设您不希望 jQuery mobile 也使用任何带有链接的 Ajax，那会很好。在大多数情况下，我很乐意让它继续使用 Ajax，所以我只在可能导致问题的地方选择性地关闭它。

于 2013-07-02T19:30:51.313 回答