正如标题所说，我的jQuery选择器似乎错了。。。
这是我的菜单.php，包含在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>
这是我的菜单.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加载正确的内容？
看起来您可能正在尝试在插件更改类之前绑定click事件。我只想用这个：
$('#demo-horizontal-menu li a').on('click', function(e) {
//....
}