加载另一个视图后 JQuery 移动菜单不起作用答案

【问题标题】：JQuery Mobile Menu does not work after loading another view加载另一个视图后 JQuery 移动菜单不起作用
【发布时间】：2013-05-02 22:45:47
【问题描述】：

我正在开发 asp.net MVC 4 Mobile 模板并尝试在 _layout 视图上设置导航菜单

环境：XP、Visual web developer 2010 express、VB。

以下是我的 _Layout 视图

<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
@*---Master Page---*@
<div data-role="page" data-theme="b">
    @*---Header Image---*@
    <div data-role="header">
        <div>
            <img src='@Url.Content("~\Content\Images\Banner.jpg")' alt="Header Img" style="max-width:100%;" />
        </div>
    </div>

    @*---Menu---*@
    <a href="#" id="search-area-switch" >Menu</a>
    <div id="dvMenu"  style="display:none">
        <ul data-role="listview" data-theme="a" >
        <li data-role="list-divider"> Select Search Type</li>
            @Code
                Dim menu As New Dictionary(Of String, String)()
                menu = CType(Session("menu"), Dictionary(Of String, String))
                @For Each item As KeyValuePair(Of String, String) In menu
                    @<li>
                        <a href='@item.Value' >
                            @item.Key
                        </a>
                    </li>
                Next                    

            End Code            
        </ul>
    </div>
        @*---Page Heading---*@
        @ViewData("SearchType").ToString()
        @*---Content/child view---*@
        <div data-role="content" >
            @RenderBody()
        </div>
</div>

    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    @RenderSection("scripts", required:=False)

    @*--- Menu Toggle script ---*@
    <script type="text/javascript">
            $('#search-area-switch').live('tap', function (event) {
                $('#dvMenu').toggle("slow");
            });
    </script>
</body>

现在在初始加载时，菜单切换工作正常，但是当我在菜单下选择一个项目时，返回另一个视图，一切看起来都很好，但菜单不再工作。

我做错了什么？

【问题讨论】：

标签： jquery asp.net-mvc jquery-mobile asp.net-mvc-4 razor

【解决方案1】：

我现在明白了，我只需要在菜单项上禁用 AJAX

所以添加 'data-ajax="false"' 对我有用。所以下面是完整的_layout

<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    @RenderSection("scripts", required:=False)        

    @*--- Menu Toggle script ---*@
    <script type="text/javascript">
        $('#search-area-switch').live('tap', function (event) {
            $('#dvMenu').toggle("slow");
        });
</script>
</head>
<body>

@*---Master Page---*@
<div data-role="page" data-theme="b">

    @*---Header Image---*@
    <div data-role="header">
        <div>
            <img src='@Url.Content("~\Content\Images\Banner.jpg")' alt="Header Img" style="max-width:100%;" />
        </div>
    </div>

     @*---Page Heading---*@
    <div data-role="header">
        <h4 style="text-align: left; margin-left: .1em;">@ViewData("SearchType").ToString().ToUpper()</h4>
        <a id="search-area-switch" href="#" data-icon="arrow-d" class="ui-btn-right">Menu</a>
    </div>

    @*---Menu---*@
    <div id="dvMenu" style="display:none;" >
        <ul data-role="listview" data-theme="a" >
        <li data-role="list-divider"> Select Search Type</li>
            @Code
                Dim menu As New Dictionary(Of String, String)()
                menu = CType(Session("menu"), Dictionary(Of String, String))
                @For Each item As KeyValuePair(Of String, String) In menu
                    @<li>
                        <a href='@item.Value' data-ajax="false" id='@String.Concat(item.Key, "_menuid")' >
                            @item.Key
                        </a>
                    </li>
                Next                    

            End Code            
        </ul>
    </div>

    @*---Content/child view---*@
    <div data-role="content" >
        @RenderBody()
    </div>

</body>

【讨论】：