stackoom
  简体   繁体   中英

JQuery click() not firing

 原文  2015-07-29 22:00:02  8   3    javascript/ jquery/ html/ html-lists

Question

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. It will execute the hide command but will not show the desired div from the if statement. I've tried to use class selectors and straight ids but nothing works.

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">&#9660;</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 answers

solution1
 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">&#9660;</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. However if you replace child with children this condition will always render true, due to the nature of jQuery . It will loop all elements and then checks if there is one with id cakes . It happens on all clicks.

So we need to check if the clicked element is the one. Therefor we can use the event object.

Use e in the function arguments as a reference to the event. This will refer to the event triggered. target is the a element which was clicked upon. Wrap it inside a jQuery function. Find its parent/or itself with closest and collect. the id.

$(e.target).closest("li").attr("id")

This will be correct.

solution2
 1 ACCPTED  2015-07-29 22:19:48

simplify your code .and use .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 

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

DEMO

solution3
 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. 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">&#9660;</span></a>

to 

<li id="menu" class="navOpt"><span class="menu-link>Menu<span class="arrow">&#9660;</span></span>

Obviously any css targeting the <a> that is now a span won't work. Target a class instead that's applied to both <a> and <span> .

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery click not firing for button jquery click not firing jquery click event not firing jQuery 'click' event not firing jQuery not firing on first click jQuery on click not firing jQuery .click on TD not firing jQuery .click() not firing as expecting Jquery .click not firing Jquery mouseover firing click
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM