Javascript 使用yui在纯菜单中查找正确的jQuery选择器

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

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

问题是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加载正确的内容？

看起来您可能正在尝试在插件更改类之前绑定单击事件。我会用这个：

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

---

在my menu.js中，选择器“.pure menu item”似乎是错误的，因为将其替换为“*”会使单击处理程序工作。但这不是一个解决方案。不幸的是，这会将html加载到一个新页面中，就像我单击普通链接一样…尝试一下我刚才编辑它的方式。没有看到您实际上正在尝试获取锚定标记。仍然将href作为新页面加载，而不是加载到内容div中：（您确定您使用的插件没有自己进行绑定吗？关于如何选择正确元素的问题已得到回答，但您似乎在这里遇到了另一个问题。如果您正在调用e.preventDefault（）一开始，除了登录到控制台之外，它不应该做任何事情。使用您的选择器，控制台在单击菜单项时会记录“单击”。没有href的菜单项也会导致控制台在不加载新页面的情况下记录“单击”。但事实并非如此。因此，jQuery似乎没有捕捉到单击。奇怪问题是，用$（'*'）替换选择器是可行的，但它当然不应该捕获每次单击。。。

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