jQuery在aspx文件中不起作用

jQuery doesn't work in the aspx file

本文关键字：不起作用 文件 aspx jQuery      更新时间：2023-09-26

我在stackoverflow上发现的JavaScript在我的代码中不起作用，但它在jsFiddle: https://jsfiddle.net/rxLg0bo4/9/
这是我如何使用内联jQuery在我的代码:

<nav id="menu">
<script type="text/javascript">

$('.menu_link').hover(function () {
    $("#pnlSubmenu").slideDown('slow');
});
$('#pnlSubmenu').on("mouseenter", function () {
    $(this).show();
});
$('#pnlSubmenu').mouseleave(function () {
    $(this).hide();
});
$('.menu_link').mouseleave(function () {
    $("#pnlSubmenu").hide();
});
            </script>
            <asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
            <asp:Panel ID="pnlSubmenu" runat="server">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>

            </asp:Panel>
        </nav>

这是我在脑子里写的:

    <script src="/Scripts/auto-rotate.js"></script>
    <script src="/Scripts/jquery.min.js"></script>
    <script src="/Scripts/key-nav.js"></script>
   <script type="text/javascript" src="/scripts/jquery.min.js"></script>

它应该使下拉菜单工作，但我认为jQuery没有得到执行

当您使用ASP时。NET控件生成的元素ID会不同。你应该使用Control。ClientID财产。

获取ASP.NET生成的HTML标记的控件ID。

还要将代码包装在文档就绪处理程序中。

指定一个在DOM完全加载时执行的函数。

使用

 $(function () {
    $('#<%=pnlSubmenu.ClientID %>').click(function () {
        //Rest of the code
    })
 })

你的JavaScript是直接执行的，而元素还没有呈现，因此没有元素可以添加事件。试着把你的代码放到document.ready()函数中。

$(document).ready(function()
{
    $('.menu_link').hover(function () {
        $("[id$=pnlSubmenu]").slideDown('slow');
    });
    $('[id$=pnlSubmenu]').on("mouseenter", function () {
        $(this).show();
    });
    $('[id$=pnlSubmenu]').mouseleave(function () {
        $(this).hide();
    });
    $('.menu_link').mouseleave(function () {
        $("[id$=pnlSubmenu]").hide();
    });
});

因为你使用的是webforms，所以元素的id会被改变。就像这里其他人建议的那样，你可以反驳这一点。你也可以像上面那样修改你的jQuery代码

控件的客户端id与asp.net中的服务器端id不同。在ID之前附加一些额外的字符。最好的解决方案是将class设置为控件，并使用类选择器在jquery中访问它们。

否则，您可以尝试以下解决方案:

$('.menu_link').hover(function () {
    $("#pnlSubmenu").slideDown('slow');
}).mouseleave(function () {
    $("#pnlSubmenu").hide();
});
$("[id$='pnlSubmenu']").on("mouseenter", function () {
    $(this).show();
}).mouseleave(function () {
    $(this).hide();
});

在asp.net控件上使用ClientIDMode="Static"。您的Asp.Net控件呈现不同的id

尝试将jquery代码放入Document中。函数，这将确保文档对象模型(DOM)为JavaScript代码执行做好准备。

$(function(){
       //Your code here
});

同时删除重复的Jquery引用

    <script src="/Scripts/jquery.min.js"></script>
    <script src="/Scripts/key-nav.js"></script>
    <script type="text/javascript" src="/scripts/jquery.min.js"></script>// Not needed

还要确保您使用正确的生成Id或使用Classes作为选择器。

相关文章：