PiotrChernin
PiotrChernin

Reputation: 501

Upgrading jQuery breaks pop-out submenus

I have code to display a menu with pop-out submenus when each menu item is hovered over.

jQuery:

    <script type="text/javascript">
    $(document).ready(function() {
        var hoverAttributes = {
                speed: 10,
                delay: 100
        };
        $("#nav-home").bind("hover", hoverAttributes, function(){
            $("#subnav").children().hide();
            $("#sub-home").show();
        });
        $("#nav-library").bind("hover", hoverAttributes, function(){
            $("#subnav").children().hide();
            $("#sub-library").show();
        });
    });
    </script>

HTML:

    <div id="nav">
        <table align="right">
            <tr>
                <td id="menu">
                    <ul>
                        <li><a href="../home" id="nav-home">Home</a></li>
                        <li><a href="../library" id="nav-library">Library</a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td id="subnav">
                    <ul id="sub-home">
                        <li><a href="../home/forum.jsp">Forums</a></li>
                        <li><a href="../home/news.jsp">News</a></li>
                        <li><a href="../home/about.jsp">About Us</a></li>
                    </ul>
                    <ul id="sub-library">
                        <li><a href="../library/resources.jsp">Resources</a></li>
                        <li><a href="../library/glossary.jsp">Glossary</a></li>
                        <li><a href="../library/references.jsp">References</a></li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>

This code works using jquery-1.6.1.min.js, but when I upgrade to jquery-1.12.4.min.js, the pop-out functionality breaks. On page load, the first menu item (Home) has its submenu already expanded. Mousing over it or other menu items causes no change in what's displayed.

I've found that the bind() action was deprecated in jQuery 3.0, but it should still work for 1.12.4, shouldn't it? I can't find any record of children(), hide() or show() being deprecated.

For context, I know very little about jQuery and JavaScript. This came up because I have to fix someone else's code.

Upvotes: 1

Views: 24

Answers (1)

Bossman
Bossman

Reputation: 1524

Have you tried changing .bind to $(".selector").on("mouseover", function () {..});

Upvotes: 1

Related Questions