在移动 MVC 站点中执行 Jquery答案

【问题标题】：Executing Jquery In mobile MVC Site在移动 MVC 站点中执行 Jquery
【发布时间】：2012-07-25 21:18:48
【问题描述】：

我正在使用 Visual Studio 中的 jquery 移动模板。在我的布局视图中，我有以下标记

   <div data-role="page"  @(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">

当呈现浏览视图时，我想将数据全屏属性更改为 true。这是我试图用来执行此操作的代码..

<script type="text/javascript">
  $("#indexPage").live('pageinit', function () {
            alert("Code Engaged");
            $("#div").attr("data-fullscreen", "true");
        });
</script>

我无法使用此代码。我在哪里放置代码来参与它？布局有几个部分..

<head>
  <meta charset="utf-8" />

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>@Page.Title</title>
  <meta name="description" content="jQuery Mobile Site">
  <meta name="author" content="">

  <!--  Mobile viewport optimized: j.mp/bplateviewport -->
  @*<meta name="viewport" content="width=device-width, initial-scale=1.0">*@
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">


  <!-- jQuery Mobile Latest Styles -->
  <link rel="stylesheet" href="//code.jquery.com/mobile/latest/jquery.mobile.min.css" />

  @* // reference the minified version of our combined css based on whether we are in debug mode. *@
  @if (jQueryMobileTemplate.MvcApplication.IsDebug)
  { 
   @* <link rel="stylesheet" href="@Url.Content("~/css/style.css?v=2")" />*@
     <link rel="stylesheet" href="@Url.Content("~/css/custom%20themes/electric1.css?v=2")" /> 

  }
  else
  {
   @* <link rel="stylesheet" href="@Url.Content("~/css/style.min.css?v=2")" />*@
       <link rel="stylesheet" href="@Url.Content("~/css/custom%20themes/electric1.min.css?v=2")" />


  }

  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <!-- We put these at the top because jquery mobile applies styles before the page finishes loading -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">


  </script>
  <script>      window.jQuery || document.write("<script src='@Url.Content("~/js/libs/jquery-1.6.1.min.js")'>\x3C/script>")</script>

  <!-- Pre jQuery Mobile init scripts for overriding defaults -->
  <script>

  </script>

  <!-- Load jQuery Mobile from jquery cdn, get latest builds -->
  <script src="//code.jquery.com/mobile/latest/jquery.mobile.min.js">

  </script>
  @* <!-- Optionally, load from local site -->
    <script src="@Url.Content("~/js/libs/jquery.mobile-1.0b1.js")"></script>
  *@

  @RenderSection("HeadContent", false)

  @*<script src="@Url.Content("~/js/libs/modernizr-2.0.min.js")"></script>
  <script src="@Url.Content("~/js/libs/respond.min.js")"></script>*@


</head>

我也在“浏览”视图的底部尝试过，但没有。我只希望“浏览”视图执行此代码。

【问题讨论】：

你的 DOM 中有 id="indexPage" 的元素吗？我看到您正在分配 string.Empty 以防 Page.Id 为空。如果你没有这样的元素，$("#indexPage") 不会做太多事情。
我正在使用 mvc jqm 移动模板。你是对的，有一个空字符串作为页面 ID。页面 id 在布局视图中设置为 string.empty。如何将浏览视图的 id 设置为“indexPage” Page 是一个 WebBasePage 动态变量。如何将其设置为“indexPage”

标签： asp.net-mvc jquery-mobile

【解决方案1】：

当我使用 asp.net-mvc 时，出于某种原因，pageinit 事件也从未对我正常工作。您可以尝试改用page change events（pagebeforechange 或pagechange）之一。

【讨论】：