共享视图上的ASP.Net MVC4 JavaScript未从链接执行

Question

我有一个简单的ASP.Net MVC 4应用程序，专为移动使用而设计。该应用程序使用内置的C＃Visual Studio模板进行移动应用程序，该模板附带表单身份验证和用于处理登录的帐户视图和控制器。

该应用程序具有内置登录视图，主菜单和我自己创建的飞行视图。

我希望CSS类“date”的所有html元素都是日期时间选择器，所以通过JQuery UI我在加载Jquery包后立即将以下JavaScript放入Shared / _Layout.cshtml视图中：

<script type="text/javascript">
            $(document).ready(function () {
                alert("test");
                $('.date').datepicker({ dateFormat: "dd/mm/yy" });

            });
</script>

当我登录应用程序并手动将浏览器中的URL更改为Flight视图时，此脚本完全符合我的需要。手动导航到http://localhost:63891/Flight

然而，当我从主菜单上的链接导航时，它从不运行脚本。在主菜单视图中，使用以下内容生成链接：

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("Flights", "Index", "Flight")</li>
</ul>

要清楚点击链接会按预期呈现视图，它只是不运行我的JavaScript。我可以让脚本运行的唯一方法是手动输入URL。

我尝试在实际的Flight视图中移动脚本，但此时没有加载JQuery，因为它是在Shared / _Llayout.cshtml视图的scripts部分中加载的。

当我悬停链接时显示的URL是localhost：63891 / Flight但是当我实际点击URL更改为localhost：63891 /＃/ Flight时。我不确定为什么会这样，如果它是相关的。

如何在点击链接时运行脚本？

编辑：我想我有这个问题，但没有人回答他/她的问题How to handle jQuery event on an ASP.net MVC Ajax loaded page?

Answer 1

如果移动网站使用JQM，它会从评论中查看它。尝试使用

$(document).bind('pageinit')

而不是

$(document).ready()

more on that

Answer 2

我已经接受了@ Igarioshka的答案，因为它将是这个问题的正常答案，并提供有关您如何在Jquery移动应用程序中使用document.ready的良好信息。

实际问题是我从VS中的Mobile模板创建了该站点，该模板自动添加了JQuery mobile。然后我继续开发，直到我需要一个日历弹出窗口。根据我在网上找到的内容，这需要JQuery UI和JQuery（完整版），所以我在SHared / _layout.cshtml视图中的JQM现有调用下添加了render调用。

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryui")

然后我添加了用于添加数据贴纸的脚本。由于@Jgarioshka详细介绍了JQuery Mobile使用AJAX的所有内容，因此不会触发。但是，将我的脚本更改为$(document).bind('pageinit', function (event, data) {

仍然没有解雇。这似乎是因为脚本是在完全爆炸的JQuery被加载之后。因此，在加载完整的jquery之前，更改代码的顺序以使用pageinit事件可以解决它。

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
        <script type="text/javascript">
            $(document).bind('pageinit', function (event, data) {
                $('.date').datepicker({ dateformat: "dd/mm/yy" });
            });
        </script>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

这对我来说意味着pageinit事件特定于JQuery Mobile，并且在完整的JQuery中不可用，这在尝试跨平台学习统一的Web开发方法时是一种耻辱。

我不确定这是否意味着我应该摆脱JQuery Mobile，因为我最终使用了完整版，或者它仍然有用，因为它有优化等。

Answer 3

尝试一个简单的标签。也许它有效：

<a href = "~/Flight/">Flights</a>

Answer 4

听起来更像是飞行＆＃39;页面部分加载（例如通过ajax）。

在查找XHR请求之前，您可以在点击“飞行”时查看网址是否发生变化。链接，如果它没有改变它意味着你的飞行＆＃39;页面部分加载，反之亦然（可以在AJAX中加载内容并更改URL）。

然后，您可以使用开发人员工具（例如Chrome）查找XHR请求。 点击F12（或右击＆＃34; Inspect Element＆＃34;），看看你是否在控制台上有XHR请求。

验证＆＃34; Log XMLHttpRequests＆＃34;选项已启用（在设置上）。