jQuery click（）无法触发
[英]JQuery click() not firing
问题描述
In the following example, the top level links work fine but the links inside of the second level of the menu do not. 
在以下示例中，顶级链接可以正常工作，但菜单第二级内部的链接却无法正常工作。 The li s are inside the dropdown, yet when you click nothing happens. li位于下拉列表中，但是当您单击时没有任何反应。 It will execute the hide command but will not show the desired div from the if statement. 它将执行hide命令，但不会从if语句中显示所需的div 。 I've tried to use class selectors and straight ids but nothing works. 我试图使用类选择器和直接ID，但没有任何效果。
The code: 编码：
// Make buttons clickable $(".slideOut").hide(); $("#mainText").show(); // alert($('.selected').attr('class').split(' ')[1]); $(".navOpt").click(function() { // Remove selected from all others $(this).siblings().removeClass("selected"); $(this).addClass("selected"); $(".slideOut").hide(); // Show appropriate div if ($(this).attr("id") == "main") { $("#mainText").show(); } else if ($(this).attr("id") == "about") { $("#aboutText").show(); } else if ($(this).attr("id") == "contact") { $("#contactText").show(); } else if ($(this).attr("id") == "gallery") { $("#galleryText").show(); } else if ($(this).child().child().attr("id") == "cakes") { $("#cakesText").show(); } }); $("#menu").hover(function() { $("#drop").show(); }); $("#cakes").click(function() { $("#cakesText").show(); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sweet Remedies</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <meta name="viewport" content="width=device-width initial-scale=1.0"> </head> <body> <header> <span>Words</span> <h1 id="title">Sweet Remedies</h1> </header> <div id="wrapper"> <div id="nav"> <nav id="menuList"> <ul> <li id="main" class="navOpt selected"><a href="#">Main</a></li> <li id="about" class="navOpt"><a href="#">About</a></li> <li id="contact" class="navOpt"><a href="#">Contact</a></li> <li id="gallery" class="navOpt"><a href="#">Gallery</a></li> <li id="menu" class="navOpt"><a href="#">Menu<span class="arrow">▼</span></a> <ul id="drop"> <li id="cakes" class="subMenu"><a href="#">Cakes</a></li> <li id="cupcakes" class="subMenu"><a href="#">Cupcakes</a></li> <li id="cookies" class="subMenu"><a href="#">Cookies</a></li> <li id="pies" class="subMenu"><a href="#">Pies</a></li> <li id="extras" class="subMenu"><a href="#">Extras</a></li> </ul> </li> </ul> </nav> </div> <div id="mainText" class="slideOut"> <p>Whether it be preparing or eating the baked yummy goodness afterwards, sometimes thats all you need to make a bad day completely turn around... and thats what we're here for.</p> <p>Sweet Remedies is a privately oened online bakery here to satisfy all of your baking needs. It is our goal to present a delectable experience to soothe your sweet tooth and/or be your baking provider for any event you may have. Thank you for visiting our site and we hope you have a sweet day.</p> </div> <div id="aboutText" class="slideOut"> <p>This text is in the wrong section.</p> </div> <div id="contactText" class="slideOut"> <p>Call me maybe?</p> </div> <div id="galleryText" class="slideOut"> <p>Here are pictures of my things.</p> </div> <div id="cakesText" class="slideOut"> <p>Cakes are great and stuff.</p> </div> <div id="cupcakesText" class="slideOut"> <p>Cupcakes are super tasty.</p> </div> <div id="cookiesText" class="slideOut"> <p>I can make lots of cookies.</p> </div> <div id="piesText" class="slideOut"> <p>I have never made a pie in my life.</p> </div> <div id="extrasText" class="slideOut"> <p>Extra words for extra items.</p> </div> <footer></footer> </div> <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html>
3 个解决方案
解决方案1
2 2015-07-29 22:10:35
// Make buttons clickable $(".slideOut").hide(); $("#mainText").show(); // alert($('.selected').attr('class').split(' ')[1]); $(".navOpt").click(function(e) { // Remove selected from all others $(this).siblings().removeClass("selected"); $(this).addClass("selected"); $(".slideOut").hide(); // Show appropriate div if ($(this).attr("id") == "main") { $("#mainText").show(); } else if ($(this).attr("id") == "about") { $("#aboutText").show(); } else if ($(this).attr("id") == "contact") { $("#contactText").show(); } else if ($(this).attr("id") == "gallery") { $("#galleryText").show(); } else if ($(e.target).closest("li").attr("id") == "cakes") { $("#cakesText").show(); } }); $("#menu").hover(function() { $("#drop").show(); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sweet Remedies</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <meta name="viewport" content="width=device-width initial-scale=1.0"> </head> <body> <header> <span>Words</span> <h1 id="title">Sweet Remedies</h1> </header> <div id="wrapper"> <div id="nav"> <nav id="menuList"> <ul> <li id="main" class="navOpt selected"><a href="#">Main</a></li> <li id="about" class="navOpt"><a href="#">About</a></li> <li id="contact" class="navOpt"><a href="#">Contact</a></li> <li id="gallery" class="navOpt"><a href="#">Gallery</a></li> <li id="menu" class="navOpt"><a href="#">Menu<span class="arrow">▼</span></a> <ul id="drop"> <li id="cakes" class="subMenu"><a href="#">Cakes</a></li> <li id="cupcakes" class="subMenu"><a href="#">Cupcakes</a></li> <li id="cookies" class="subMenu"><a href="#">Cookies</a></li> <li id="pies" class="subMenu"><a href="#">Pies</a></li> <li id="extras" class="subMenu"><a href="#">Extras</a></li> </ul> </li> </ul> </nav> </div> <div id="mainText" class="slideOut"> <p>Whether it be preparing or eating the baked yummy goodness afterwards, sometimes thats all you need to make a bad day completely turn around... and thats what we're here for.</p> <p>Sweet Remedies is a privately oened online bakery here to satisfy all of your baking needs. It is our goal to present a delectable experience to soothe your sweet tooth and/or be your baking provider for any event you may have. Thank you for visiting our site and we hope you have a sweet day.</p> </div> <div id="aboutText" class="slideOut"> <p>This text is in the wrong section.</p> </div> <div id="contactText" class="slideOut"> <p>Call me maybe?</p> </div> <div id="galleryText" class="slideOut"> <p>Here are pictures of my things.</p> </div> <div id="cakesText" class="slideOut"> <p>Cakes are great and stuff.</p> </div> <div id="cupcakesText" class="slideOut"> <p>Cupcakes are super tasty.</p> </div> <div id="cookiesText" class="slideOut"> <p>I can make lots of cookies.</p> </div> <div id="piesText" class="slideOut"> <p>I have never made a pie in my life.</p> </div> <div id="extrasText" class="slideOut"> <p>Extra words for extra items.</p> </div> <footer></footer> </div> <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html>
child isn't a jQuery function, children is. child不是jQuery函数， children是。 However if you replace child with children this condition will always render true, due to the nature of jQuery . 不过，如果你换成孩子children这种状况将一直呈现真实的，因为jQuery的性质。 It will loop all elements and then checks if there is one with id cakes . 它将循环所有元素，然后检查是否有一个ID cakes 。 It happens on all clicks. 发生在所有点击上。
So we need to check if the clicked element is the one. 因此，我们需要检查clicked元素是否为一个。 Therefor we can use the event object. 因此，我们可以使用事件对象。
Use e in the function arguments as a reference to the event. 在函数参数中使用e作为对该事件的引用。 This will refer to the event triggered. 这将涉及触发的事件。 target is the a element which was clicked upon. target是被单击的元素。 Wrap it inside a jQuery function. 将其包装在jQuery函数中。 Find its parent/or itself with closest and collect. 找到closest父代或自身并收集。 the id. ID。
$(e.target).closest("li").attr("id")
This will be correct. 这是正确的。
解决方案2
1 已采纳 2015-07-29 22:19:48
simplify your code .and use .not('#menu.navOpt') 简化您的代码。并使用.not（'＃menu.navOpt'）
instead of doing all that if statments you can just get the clicked element ID and use it to show his specific div 而不是执行所有陈述，您只需获取被点击元素ID并使用它来显示其特定的div
// Make buttons clickable
$(".slideOut, #mainText, #drop").hide();
// alert($('.selected').attr('class').split(' ')[1]);
// use .not('#menu.navOpt') to make #menu not clickable you just need it to show the submenu on hover
$(".navOpt").not('#menu.navOpt').click(function() {
// Remove selected from all others
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
var getId = $(this).attr("id"); // get this element ID
$('.slideOut').hide(); // hide all divs with class slideOut
$('#'+getId+'Text').show(); // use the ID to show its div
});
$("#menu").hover(function() {
$("#drop").show();
});
$("#cakes").on('click',function() {
$('.slideOut').hide();
$("#cakesText").show();
});
解决方案3
0 2015-07-29 22:14:22
You're still clicking an anchor tag nested inside .navOpt which has href="#" and triggers a page refresh. 您仍在单击嵌套在.navOpt内的锚标签，该锚标签具有href="#"并触发页面刷新。 That's also why the example jumps to the top of the page. 这就是为什么该示例跳至页面顶部的原因。
Change 更改
<li id="menu" class="navOpt"><a href="#">Menu<span class="arrow">▼</span></a>
to 至
<li id="menu" class="navOpt"><span class="menu-link>Menu<span class="arrow">▼</span></span>
Obviously any css targeting the <a> that is now a span won't work. 显然，任何以<a>为目标的css现在都不能使用。 Target a class instead that's applied to both <a> and <span> . 定位到同时应用于<a>和<span> 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.