Question

我在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不会被执行。

Answer 1

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

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

还将代码包装在document-ready处理程序中。

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

使用

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

Answer 2

您的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();
    });
});

因为您正在使用网络表单，所以元素的ID会发生变化。像这里建议的其他人一样，你可以反击。您也可以像上面那样更改您的jQuery代码。

Answer 3

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

OrElse您可以尝试以下解决方案：

$('.menu_link').hover(function () {
    $("#pnlSubmenu").slideDown('slow');
}).mouseleave(function () {
    $("#pnlSubmenu").hide();
});

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

Answer 4

尝试将jquery代码放在Document.ready函数中，这将确保文档对象模型（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作为选择器。

Answer 5

在asp.net控件上使用ClientIDMode="Static"。您Asp.Net控件使用不同的ID进行渲染

jQuery在aspx文件中不起作用

5 个答案: