Javascript和css样式在ajax更新面板中不起作用

时间:2016-11-08 10:15:34

标签: jquery css updatepanel

在我的应用程序中,我有一个主 Main.master 页面和多个子页面。我已将母版页中的所有jQuery和CSS链接添加到head标记中。

<%@  Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Website.Main" %>
<%@ Register Src="uc/LeftNav.ascx" TagName="LeftNav" TagPrefix="uc4" %>
<!doctype html>
<html class="no-js" lang="en">
<head runat="server" id="head1">
  <meta charset="utf-8">
  <!-- Layout Styles -->
  <link rel="stylesheet" type="text/css" href="<%#ResolveUrl("~/css/style.css") %>" />
  <link rel="stylesheet" type="text/css" href="<%#ResolveUrl("~/css/grid.css") %>" />
  <link rel="stylesheet" type="text/css" href="<%#ResolveUrl("~/css/layout.css") %>" />
  <link rel="stylesheet" type="text/css" href="<%#ResolveUrl("~/css/icons.css") %>" />
  <link rel="stylesheet" type="text/css" href="<%#ResolveUrl("~/css/fonts/font-awesome.css") %>" />
  <script src="<%#ResolveUrl("~/js/mylibs/dynamic-tables/jquery.dataTables.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/mylibs/dynamic-tables/jquery.dataTables.tableTools.zeroClipboard.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/mylibs/dynamic-tables/jquery.dataTables.tableTools.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/mylibs/gallery/jquery.fancybox.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/mylibs/tooltips/jquery.tipsy.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/mango.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/plugins.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/script.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/app.js")%>"></script>
  <script src="<%#ResolveUrl("~/js/extras.js")%>"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="420"></asp:ScriptManager>
    <div class="top">
      <uc1:leftnav runat="server" id="LeftNav" />
    </div>
    <section id="content" class="container_12 clearfix" data-sort="true">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
    </section>
    <!-- End of #content -->
  </form>
</body>
</html>

所有jQuery和CSS链接在页面加载时都能正常工作,但我在子页面中使用了 asp ajax updatepanel

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="AddNewOnileExam.aspx.cs" Inherits="Website.Views.Online_Exam.AddNewOnileExam" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <asp:updatepanel id="UpdatePanel1" runat="server" updatemode="Conditional">
    <ContentTemplate>
      <asp:Panel ID="pnl_InsertData" runat="server">
        <asp:Panel ID="pnl_Insert" runat="server">
          <div class="grid_12">
            <div class="box grid">
              <div class="header">
                <h2>Exam Details</h2>
              </div>
              <div class="">
                <div class="row">
                  <p class="_50">
                    <label class="left">Name of Exam</label>
                    <asp:TextBox ID="tb_name_of_exam" runat="server" MaxLength="150"></asp:TextBox>
                  </p>
                </div>
                <div class="row">
                  <p class="_25">
                    <label class="left">Sessions</label>
                    <asp:DropDownList ID="ddl_sessions" runat="server" OnSelectedIndexChanged="ddl_sessions_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
                  </p>
                  <p class="_25">
                    <label class="left">Class</label>
                    <asp:DropDownList ID="ddl_classes" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl_classes_SelectedIndexChanged"></asp:DropDownList>
                  </p>
                </div>
                <div class="row">
                  <p class="_25">
                    <label class="left">Exam Type</label>
                    <asp:DropDownList ID="ddl_exam_type" runat="server" OnSelectedIndexChanged="ddl_exam_type_SelectedIndexChanged" AutoPostBack="true">
                      <asp:ListItem Value="1">General</asp:ListItem>
                      <asp:ListItem Value="2">Subject Specific</asp:ListItem>
                    </asp:DropDownList>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </asp:Panel>
      </asp:Panel>
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ddl_exam_type" EventName="SelectedIndexChanged" />
      <asp:AsyncPostBackTrigger ControlID="ddl_classes" EventName="SelectedIndexChanged" />
      <asp:AsyncPostBackTrigger ControlID="ddl_sessions" EventName="SelectedIndexChanged" />
    </Triggers>
  </asp:updatepanel>
</asp:Content>

当页面部分回发到下拉选择索引更改时,jQuery和CSS不起作用。我通过谷歌搜索这个问题看到了很多解决方案,但它们都不适合我...

0 个答案:

没有答案