selecting a given list item via jquery

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.

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?

<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>

Select allOpen 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;
           
           
          
        }

Select allOpen in new window

 $(document).ready(function () {

       

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

        });

      

</script>

Select allOpen in new window

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

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");

        });

Select allOpen in new window

also, in the firebug console executing  $('.header') returns the four anchor tags so there is nothing wrong with the selector.

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");
});

Select allOpen 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?

fantastic - thank you

It seems I can use your syntax with a minor correction

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

Select allOpen in new window

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 :)

I have jquery1.6.1 so I used the .live or .delegate syntax - thanks again