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

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 代码保存在一个单独的文件中，比方说 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

除了之前的回答，我必须说如果这是一个服务器控件（设置了 runat="server" 属性），您的元素的 ID 可能是动态的。所以你应该使用 '#'+'<%=lvPayam.ClientID%>' 作为 Id。

Answer 3

因为 runat="server" 它不工作。

使用

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

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

jquery doesn't work in my asp.net content page

html

javascript

asp.net

jquery