JQuery UI 不适用于母版页答案

【问题标题】：JQuery UI not working with Master PagesJQuery UI 不适用于母版页
【发布时间】：2011-06-23 17:57:50
【问题描述】：

我已成功使 JQuery 与母版页一起工作，但不是 JQuery UI。我在母版页中的标题如下所示：

<head runat="server">
<title>Analytics</title>
<link href="~/css/PageElements.css" rel="stylesheet" type="text/css" runat="server"/>
<link href="~/css/FormElements.css" rel="stylesheet" type="text/css" runat="server"/>
<link href="~/css/Buttons.css" rel="stylesheet" type="text/css" runat="server"/>
<link href="<%# ResolveUrl("~/css/smoothness/jquery-ui-1.8.9.custom.css") %>" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/jquery-1.4.4.min.js") %>" />
<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/jquery-ui-1.8.9.custom.min.js") %>" />

<script type="text/javascript">
    jQuery.noConflict();  <%--This should avoid conflicts Ajax Control Toolkit--%>
</script>

<asp:ContentPlaceHolder ID="HeaderPlaceHolder" runat="server" />
</head>

在内容页面中，我根据 JQuery UI 演示页面创建了一个非常简单的脚本来加载日期选择器。我总是收到“Microsoft JScript 运行时错误：对象不支持此属性或方法”。这是我的内容页面：

<asp:Content ID="MainContent" ContentPlaceHolderID="MainPlaceHolder" runat="server">
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#<%=btnSubmit.ClientID %>').click(function () {
        alert("Hello world!");
    });

});
</script>

<script type="text/javascript">
    jQuery(function () {
        jQuery('#<%=datepicker.ClientID %>').datepicker();
    });
</script>

<div class="demo">

<p>Date: <asp:TextBox runat="server" ID="datepicker" /></p>

</div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>

CSS 文件夹就位，纯 JQuery 调用工作。这个简单的日期选择器不适用于此母版页/内容设置。我尝试了许多日期选择器 ID 的组合，使用 ClientID（原样）、UniqueID、[id$=datepicker] 等。

有人可以解释一下吗？我错过了什么？

【问题讨论】：

我不知道但有两个建议：（1）为什么对jquery相关的css和js使用ResolveUrl，而对其他使用静态字符串？为什么不把静态字符串也用于与 jquery 相关的资源呢？确保将 jquery 资源放在物理路径中。 (2) 如果要诊断，请在加载后在浏览器中执行“查看源代码”，您可以看到ResolveUrl 正在解析的内容。这可能会提示您需要为路径使用什么。
不确定这是否真的会有太多帮助...但是您可以使用 id 以外的其他东西来瞄准 jQuery。如果您将其设置为“datepicker”类，您将不必与 ClientID 抗争。相反，使用 $(.datepicker).datepicker();
您也可以尝试jQuery("[id$='datepicker']").datepicker(); 并将代码移至jQuery(document).ready(function(){ /*date picker code here*/ });
ResolveUrl 是因为我在应用程序的根目录下有模块，即 WM/ 和 PM/，它们都托管不同的文件集。到 CSS 的静态链接有一个 runat="server" 属性，这将使 IIS 相应地解析文件夹名称。我将尝试使用 CSS 而不是文本框 ID，尽管之前已经尝试过。

标签： jquery asp.net user-interface master-pages

【解决方案1】：

不要对<script> 使用自闭标签 Why don't self-closing script tags work?

【讨论】：

非常感谢。令人难以置信的是我以前找不到这个解决方案，现在这些插件就像一个魅力一样工作。

【解决方案2】：

我发现解决此问题的唯一方法是在内容页面中添加脚本引用。在预渲染期间，我尝试以与添加 jquery 相同的方式添加 jqueryui。它只是行不通。

【讨论】：