Question

我想在内容母版页中调用jquery，但它在内容母版页中不起作用，而它本身就可以工作。

母版页中的代码是

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="datetimepicker.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>

<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />

    </div>
    </form>
</body>
</html>

内容页面中的代码

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <img src="Styles/sms1.png" alt="not" />   
<script type="text/javascript">
    $(document).ready(function () {
        $("<%=TextBox1.ClientID %>").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });
</script>
</asp:Content>

Answer 1

当您在母版页中查看下面的代码时，您的脚本将被插入到ContentPlaceHolder1中，但是在脚本之后正在加载jquery。这就是为什么它不起作用，因为脚本应该在加载jquery之后注入。

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>

您可以更改Master页面和Content页面，以确保脚本是在jquery脚本之后注入的。

母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="datetimepicker.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>

<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="script" runat="server">
    </asp:ContentPlaceHolder>

    </div>
    </form>
</body>
</html>

内容页面

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <img src="Styles/sms1.png" alt="not" /> 
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">  
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextBox1.ClientID %>").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });
</script>
</asp:Content>

如果查看上面的代码，在jquery和其他脚本以及内容页面脚本移动到这个新占位符后，将在母版页中创建另一个ContentPlaceHolder脚本。

jquery函数在内容母版页中不起作用

1 个答案: