Question

我有一个母版页像这样：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="../Styles/Style.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
        </Scripts>
    </asp:ScriptManager>
    <div id="Page">
         <div id="divMaster" style="width:200px; height:200px; border:1px solid red;" 
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>

    </div>

     <script>
    $("#divMaster").click(function () { alert("div in Master Page has been clicked);});
   </script>
</form>
</body>
</html>

我的内容页面：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="serve
   <div id="divContent" style="width:200px; height:200px; border:1px solid red;" runat="server"></div>
    <script>
    $("#divContent").click(function () { alert("div in content page has been clicked);});
   </script>
</asp:Content

显示和隐藏div工作的主页面中的

但在内容页面中不起作用。我的问题？

为什么jquery（显示和隐藏div）在我的内容页面中不起作用？

Answer 1

您可以将js代码保存在separte文件中，让我们说script.js

在您的母版页中：

 <script src="path/to/script.js"></script>

在你的js文件（script.js）中：

$(document).on('event', '#element', function() {
   // your code here ..
});

on()函数将识别ID为element的任何元素，即使此元素在页面加载后动态加载

修改

您只需要包含（仅在您的母版页中），首先是jquery文件，然后是您的script.js文件

您的代码位于单独的文件中：

$(document).click( function () { $("#KadreNemayeshePayam").hide(1); } ); $(document).on('click', '#DivPayamha', function (e) { e.stopPropagation(); var knp = $("#KadreNemayeshePayam"); if (knp.is(":hidden")) { knp.show(1); ListePayamhaRaBegir(); } else { knp.hide(500); } }); function ListePayamhaRaBegir() { var vizhegiha = {}; vizhegiha.url="/Modiriat/Modiriat.Master/GetMessages"; vizhegiha.type = "POST"; vizhegiha.data = null; vizhegiha.contentType = "application/json/:charset:utf-8"; vizhegiha, datatype = "json"; vizhegiha.success = function (data) { $('lvPayam').bind(data); }; vizhegiha.error = function () { }; $.ajax(vizhegiha); } //=========================== =============== $(document).on('click', '#KadreNemayeshePayam', function (e) { e.stopPropagation(); }); //=========================== =============== $(document).on('click', '#NavarAbzar', function (e) { e.stopPropagation(); });

注意

在这一行：

vizhegiha.success = function (data) { $('lvPayam').bind(data); };

lvPayam不是有效的html标记，因此它应为$('#lvPayam')或$('.lvPayam')

Answer 2

除了上一个答案之外，我必须说明你的元素ID是否是服务器控件（runat =＆＃34;服务器＆＃34;属性是seched）可能是动态的。因此，您应该使用'#'+'<%=lvPayam.ClientID%>'作为ID。

Answer 3

由于runat =“server”，它无效。

使用

 <div id="divContent" style="width:200px; height:200px; border:1px solid red;"></div>

jquery在我的asp.net内容页面中不起作用

3 个答案: