javascript - 使用 yui 在纯菜单中寻找正确的 jQuery 选择器

Question

正如标题所说，我的 jQuery 选择器似乎是错误的...

这是包含在 index.php 中的我的 menu.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>

这是我的 menu.js，它应该在 index.html 的内容 div 中加载 href:

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

问题是 YUI 改变了 .class 和 #id 元素，所以变成如下:

<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>

什么是正确的选择器，以便单击菜单元素会导致 jQuery 加载正确的内容？

Answer 1

看起来您可能试图在插件更改类之前绑定(bind)点击事件。我只会用这个:

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