ASP.NET 中的主/内容页面中的 jQuery 被忽略答案

【问题标题】：jQuery in Master / Content page in ASP.NET ignoredASP.NET 中的主/内容页面中的 jQuery 被忽略
【发布时间】：2013-05-07 08:14:15
【问题描述】：

我正在尝试在 ASP.NET 上使用 jQuery，实际上下面的代码运行良好！

<head runat="server">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico"/>
    <script src="Scripts/jquery-1.9.1.min.js"></script>    
    <script src="Scripts/jquery-ui-1.10.2.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="StyleSheet.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("#txtDateFrom").datepicker({ dateFormat: 'mm-dd-yy' })
        });
        $(function () {
            $("#txtDateTo").datepicker({ dateFormat: 'mm-dd-yy' })
        });        
    </script>
</head>

但如果我在 Mater/Content 页面 ASP.NET 上使用 jQuery，jQuery 将被忽略。

母版页：

<head runat="server">
    <title>asdf</title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>    
    <script src="Scripts/jquery-ui-1.10.2.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link rel="shortcut icon" href="favicon.ico"/>
    <link href="StyleSheet.css" rel="stylesheet" />
    <asp:ContentPlaceHolder id="head" runat="server">

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div runat="server" id="top_outer"></div>
        <div runat="server" id="outer">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>

内容页面：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">        
        $(function () {
            $("#txtDateFrom").datepicker({ dateFormat: 'mm-dd-yy' })
        });
        $(function () {
            $("#txtDateTo").datepicker({ dateFormat: 'mm-dd-yy' })
        });
    </script>
</asp:Content>

有人知道为什么吗？

编辑： 我从 Chrome 中的“查看页面源代码”中获得了以下代码，当我检查 javascript 的每个链接时，页面显示了 javascript 代码。如何检查 jQuery 是否正确加载？

<head><title>
    asdf
</title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>    
    <script src="Scripts/jquery-ui-1.10.2.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" /><link rel="shortcut icon" href="favicon.ico" /><link href="StyleSheet.css" rel="stylesheet" />
    <script type="text/javascript">        
        $(function () {
            $("#txtDateFrom").datepicker({ dateFormat: 'mm-dd-yy' })
        });
        $(function () {
            $("#txtDateTo").datepicker({ dateFormat: 'mm-dd-yy' })
        });
    </script>
</head>

【问题讨论】：

从这里的代码中它不会被忽略 - 但你犯了一些其他错误，可能在你提供的目录中找不到。检查是否加载了 jQuery，以及相对于页面位置是否正确放置了目录。
对于您正在查看的页面，指向 jQuery 脚本文件的链接是否正确？相对路径需要相对于页面而不是母版页。这让我抓了好几次。
如果您使用浏览器调试器，例如 Firebug、Chrome 工具等，他们会提供更多信息吗？
如何判断 jQuery 是否正确加载？

标签： jquery asp.net jquery-ui c#-4.0 master-pages

【解决方案1】：

我需要将 "#txtDateFrom" 更改为 "#"，现在它可以正常工作了！

<script type="text/javascript">
    $(function () {
        $("#<%=txtDateFrom.ClientID %>").datepicker({ dateFormat: 'mm-dd-yy' })
    });
    $(function () {
        $("#<%=txtDateTo.ClientID %>").datepicker({ dateFormat: 'mm-dd-yy' })
    });
</script>

【讨论】：