?
Solved

selecting a given list item via jquery

Posted on 2012-09-10
12
Medium Priority
?
270 Views
Last Modified: 2012-09-11
my html is as follows

<div id="resultsDiv>
    <div class="dropdown>
     <div class="submenu1>
        <div id="submenuDiv>
           <ul class="root>
            <li>
              <a href="#"

 $('#resultsDiv > .dropdown > .submenu1 > #submenuDiv > ul li ').hover(function () {
            alert("hhhhh");
        });

Open in new window


all I'm trying to do is do something when one of the li is selected. Essentially I have to make visible another dropdown based on the li that is selected...
0
Comment
Question by:sanagarwl
  • 9
  • 2
12 Comments
 

Author Comment

by:sanagarwl
ID: 38384551
jQuery('[rel="external3"]').click(function (e) {
            e.preventDefault();
            alert("sfsdf");
        });

I have my anchor tag as <a rel="external3"> High School </a> and the click function does not fire at all.

thanks a lot for the help.
0
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 38384598
Why aren't there any closing double quotes on your id and class attributes?

Where are the element(s) that have rel="external3"?

Can you create a jsfiddle with the complete HTML and javascript?
0
 

Author Comment

by:sanagarwl
ID: 38384644
<div style="display: block;" id="resultsDiv">
                <div class="dropdown">
    
                    <div class="submenu1">
        
       
                        <div class="submenu" id="submenuDiv">
							<ul class="root">         
								<div class="header">         
								<li>                                       
									<a> High School  </a>
								</li>                 
						</div>             
							</ul>
								<ul class="root">        
									<div class="header">        
								<li>                                      
								<a>                                                                    
									Middle School                                        
								</a>
								</li>                 
								</div>             
								</ul>
								
								<ul class="root">         
								<div class="header">         
								<li>                                      
									<a>                                                                     
										Elementary School                                        
									</a>
								</li>                 
						
								</div>             
								</ul><ul class="root">         
						<div class="header">         
						<li>                                      
						<a>                                                                     
						Preschool/early childhood                                        
						</a></li>                 
						</div>            
						</ul></div>
                    </div>
                </div>
            </div>

Open in new window


.dropdown 
        {
            color: #555;
            
            margin: 3px -22px 0 0;
            width: 155px;
            position: absolute;
            height: 17px;
            text-align:left;
            z-index: 4999;

           
        }
        .submenu1
        {
            
            position: absolute;
           
             background: #FFF;
          
            z-index: 5000;
              border-top:2px solid #dedede;
            border-bottom:2px solid #dedede;
            border-left:2px solid #dedede;
            border-right:2px solid #dedede;
           
          
            

        }
        .submenu
        {
            
            position: absolute;
           
            width: 155px;
            background: #FFF;
            margin-left: 10px;
            padding: 20px 0 5px;
            border-radius: 6px;
            
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
            z-index: 5001;
       
                
        }
        .dropdown li a 
        {
            color: #555555;
            display: block;
            font-family: arial;
            font-weight: bold;
            padding: 6px 15px;
            cursor: pointer;
            text-decoration:none;
        }
 
        .dropdown li a:hover
        {
            background:#155FB0;
            color: #FFFFFF;
            text-decoration: none;
        }
        a.account 
        {
            font-size: 11px;
            line-height: 16px;
            color: #555;
            position: absolute;
            z-index: 110;
            display: block;
            padding: 11px 0 0 20px;
            height: 28px;
            width: 121px;
            margin: -11px 0 0 -10px;
            text-decoration: none;

            cursor:pointer;
        }
        .root
        {
            list-style:none;
            margin:0px;
            padding:0px;
            font-size: 11px;
            padding: 11px 0 0 0px;
      
         
        }
        .header
        {
           
            font-size: 11px;
           
           
          
        }

Open in new window


 $(document).ready(function () {

       

        $('.header').click(function (e) {
            e.preventDefault();
            alert("ghhhgg");

        });

      

</script>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:sanagarwl
ID: 38384651
I've posted the relevant snippets above.

Essentially, this is an ajax call and I am populating the dropdown menu with the relevant data.

the School categories are appearing just fine and then the schools within the school categories are also present in the DOM. I can view the way they appear using firebug.

The only issue is that when I mouse over a given school categor then the relevant dropdown containing the schools has to be made visible. For some reason I am unable to attach either a hover or a click event.

thanks for looking into this
0
 

Author Comment

by:sanagarwl
ID: 38384661
Also, once I can get the click to fire for the header class elements then I should be able to take it from there.

Strangely enough, this piece of code works just fine

$('#resultsDiv > .dropdown > .submenu1 > #submenuDiv').click(function (e) {
            e.preventDefault();
            alert("ghhhgg");

        });

Open in new window

0
 

Author Comment

by:sanagarwl
ID: 38384690
also, in the firebug console executing  $('.header') returns the four anchor tags so there is nothing wrong with the selector.
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38384996
When you attach events to elements, such as hover() and click() they are only attached to elements that exist at the time the call is made. You say you are using an ajax call, so maybe the elements didn't exist in the page when the hover() event was initially attached. To get around this, you need to attach your events using either live() or on(), depending on your version of jQuery. Use live() for jQuery <1.7 and on() for jQuery >=1.7.

Something like this:
$("#resultsDiv").on("click", ".header", function(e){
     e.preventDefault();
     alert("Header Clicked");
});

Open in new window

This binds the click event to any element with a class of header that appears in resultsDiv - either when the call is originally made, or that are added later (via an ajax class for example). The resultsDiv has to exist when this call is made, otherwise it won't work.

Also, in your jQuery code snippet above, you are not closing the $(document).ready() function.
0
 

Author Comment

by:sanagarwl
ID: 38385212
thank you very much. You were correct - I should have checked that.

Every thing until submenuDiv is available when the call is made so I needed to use the live syntax.

one quick correction though - a minor one - the following syntax worked. If I use the one you suggested then every thing within the #resultsDiv responds to the click event.

$(".header").live("click", function(e){
     e.preventDefault();
     alert("Header Clicked");
});

Open in new window


(also, I had closed the losing the $(document).ready() function, while copying pasting the snippet the missed that out...)

again, thank you very very much. quick question - is it better to use delegates - read that in stackoverflow - due to performance reasons?
0
 

Author Closing Comment

by:sanagarwl
ID: 38385214
fantastic - thank you
0
 

Author Comment

by:sanagarwl
ID: 38385219
It seems I can use your syntax with a minor correction
$("#resultsDiv").delegate("click", ".header", function(e){
     e.preventDefault();
     alert("Header Clicked");
});

Open in new window

0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38385970
Only the .header elements within the resultsDiv will respond to the click

$("#resultsDiv").on("click", ".header", function(e){
     e.preventDefault();
     alert("Header Clicked");
});

Pleased you got it working :)
0
 

Author Comment

by:sanagarwl
ID: 38386224
I have jquery1.6.1 so I used the .live or .delegate syntax - thanks again
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month13 days, 10 hours left to enroll

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question