Looking for right jQuery selector in a pure menu with yui

Question

As the title says, my jQuery selector seems to be wrong...

This is my menu.php that is included in the index.php:

<div id="demo-horizontal-menu">
    <ul class="menu-ul" id="std-menu-items">
        <li class="pure-menu-selected">
            <a href="./sites/home/home.php" id="menu-item"><img src="./resources/icons/home.png">Home</a></li>
        <li class="pure-dropdown">
            <a><img src="./resources/icons/swimmer.png" title="Schwimmer">Schwimmer <i class="arrow"></i></a>
            <ul>
                <li><a href="./sites/swimmers.php"><img src="./resources/icons/user_list.png">Gesamtliste</a></li>
            </ul>
        </li>
        <li>
            <a href="./sites/new_swimmer.php"><img src="./resources/icons/add_swimmer.png" title="Probeschwimmer verwalten">Probeschwimmer</a></li>
        <li>
            <a><img src="./resources/icons/stats_3d.png" title="Statistiken anzeigen">Statistiken</a>
            <ul>
                <li><a href="./sites/statistics_training.php"><img src="./resources/icons/report.png" title="Trainingsbesuche">Training</a></li>
            </ul>
        </li>
        <li>
            <a href="./layout/badge.php"><img src="./resources/icons/qr_scan.png" title="Mitgliedsausweise verwalten">Ausweise</a></li>
        <li>
            <a><img src="./resources/icons/business_user.png">Benutzer</a>
            <ul>
                <li><a href="../roundcube"><i class="fa fa-envelope"></i> Webmail</a></li>
                <li><a href="./sites/user_settings.php"><i class="fa fa-wrench"></i> Einstellungen</a></li>
                <li class="pure-menu-separator"></li>
                <li><a href="./scripts/logout.php"><i class="fa fa-sign-out"></i> Abmelden</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

    var horizontalMenu = new Y.Menu({
        container         : '#demo-horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });

    horizontalMenu.render();
    horizontalMenu.show();

});
</script>

And this is my menu.js that should load the href's in a content div in the index.html:

$(document).ready(function () {
    console.log('ready');

    $('.pure-menu-item').on('click', function (e) {

        console.log('click');
        console.log(e.target.className);
        e.preventDefault();
        var a_href = $(e.target).attr('href');
        console.log(a_href);
        if (a_href !== "./scripts/logout.php" && a_href !== "../roundcube") {
            e.preventDefault();
            $(".content").load(a_href, function (response, status, xhr) {
                if (status === "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }
            });
        }
    });
});

The problem is that YUI changes the .class and the #id elements, so thay become as follows:

<div id="demo-horizontal-menu" class="pure-menu pure-menu-horizontal pure-menu-notouch pure-menu-open">
    <ul class="pure-menu-children" tabindex="0" role="menu" aria-expanded="true" id="yui_3_17_2_1_1411211905129_153">
        <li id="menuItem-yui_3_17_2_1_1411211905129_103" class="pure-menu-item" aria-hidden="false" aria-labelledby="yui_3_17_2_1_1411211905129_118" role="menuitem">
            <a href="./sites/home/home.php" class="pure-menu-label" data-item-id="menuItem-yui_3_17_2_1_1411211905129_103" id="yui_3_17_2_1_1411211905129_118"><img src="./resources/icons/home.png">Home</a></li>
        <li id="menuItem-yui_3_17_2_1_1411211905129_105" class="pure-menu-item pure-menu-can-have-children pure-menu-has-children" aria-hidden="false" aria-labelledby="yui_3_17_2_1_1411211905129_121" role="menuitem">
            <a href="#" class="pure-menu-label" data-item-id="menuItem-yui_3_17_2_1_1411211905129_105" id="yui_3_17_2_1_1411211905129_121"><img src="./resources/icons/swimmer.png" title="Schwimmer">Schwimmer <i class="arrow"></i></a>
            <ul class="pure-menu-children" aria-expanded="false">
                <li id="menuItem-yui_3_17_2_1_1411211905129_104" class="pure-menu-item" aria-hidden="false" aria-labelledby="yui_3_17_2_1_1411211905129_125" role="menuitem">
                    <a href="./sites/swimmers.php" class="pure-menu-label" data-item-id="menuItem-yui_3_17_2_1_1411211905129_104" id="yui_3_17_2_1_1411211905129_125"><img src="./resources/icons/user_list.png">Gesamtliste</a></li>
            </ul>
        </li>
    </ul>
</div>

What would be the right selector, so that clicking on a menu element would cause jQuery to load the right content?

In my menu.js the selector '.pure-menu-item' seems to be wrong, because replacing that with '*' makes the click handler work. But that isn't a solution. — denisj07, Sep 20 '14 at 11:50

Brian · Accepted Answer · 2014-09-20T11:57:37.193

0

Looks like you are probably trying to bind the click event before the plugin changes the classes. I would just use this:

$('#demo-horizontal-menu li a').on('click', function(e) {
    //....
}

edited Sep 20 '14 at 11:57

answered Sep 20 '14 at 11:51

Brian

903
1
7
13

Unfortunately this loads the html in a new page like i would click on a normal link... – denisj07 Sep 20 '14 at 11:54
try it the way i just edited it. didnt see that you were actually trying to get the anchor tag. – Brian Sep 20 '14 at 11:58
Still loading the href as a new page and not in the content div :( – denisj07 Sep 20 '14 at 12:01
You sure the plugin you are using isn't doing bindings of its own? The question as to how to select the correct elements is answered but you seem to have another problem here. If you are calling e.preventDefault() at the beginning like that it shouldn't do anything at all other than log to the console. – Brian Sep 20 '14 at 12:07
Using your selector the console would log a 'click' when clicking on a menu item. A menu item without a href would also cause the console to log the 'click' without loading a new page. But it does not. So it seems that jQuery does not catch the click. Strange thing is that replacing the selector with $('*') works, but it should not catch every click of course... – denisj07 Sep 20 '14 at 12:55

Looking for right jQuery selector in a pure menu with yui

1 Answers1