jQuery Selector issue

[Joe San]

Guys,

Why is the alert not showing up on click of Java Test 1 in the code sample below? Is my selector syntax not correct? I guess so...

<script type="text/javascript">

$('.content.item #mockExamTabs #tabs #tabs-2 p a').click(function() {
  alert('Handler for .click() called.');
});

</script>
<div class="content">		
    	<div class="item">
		<h1>Mock Exams and Stuff</h1>
		<p>Please click on the tabs below to learn more!</p>
	</div>
	<div class="item">
		<script>
		$(function() {
			$( "#tabs" ).tabs({
				event: "mouseover"
			});
		});
		</script>
		<div id="mockExamTabs">
			<div id="tabs" style="height:420px;" >
				<ul>
				  <li><a >Read Me</a></li>
				  <li><a >Core Java</a></li>
				  <li><a >JSP and Servlets</a></li>
				  <li><a >JSF</a></li>
				  <li><a >EJB</a></li>
				  <li><a >JPA</a></li>
				  <li><a >Spring</a></li>
				  <li><a >Other Frameworks</a></li>
				</ul>
			    <div id="tabs-1">
				  <p >
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications...
					Why on earth would you do something like this?
					This is not really interesting... Go and watch some movies that are newly released...
					
				  </p>
			    </div>
			    <div id="tabs-2">
				  <p >
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.</br></br>
					
					The following sample exams are available. (This will be iterated and shown here)</br></br>
					<a >Java Test 1</a> : Focus on Collections and Generics</br></br>
					<a >Java Test 2</a> : Focus on Constructor and Object creation</br></br>
					<a >Java Test 3</a> : Focus on Constructor and Object creation</br></br>
					<a >Java Test 4</a> : Focus on Constructor and Object creation</br></br>
					<a >Java Test 5</a> : Focus on Constructor and Object creation					
				  </p>
			    </div>
		    </div>
	    </div>
    </div>
</div>

[Gregg Bolinger]

Your selector is overly complicated. this will suffice:

$('#tabs-2 a').click(function() {  }

If you want to limit it to anchor children of paragraphs:

$('#tabs-2 p>a').click(function() {  }

Demo

[Joe San]

Gregg Bolinger wrote:Your selector is overly complicated. this will suffice:

$('#tabs-2 a').click(function() {  }

If you want to limit it to anchor children of paragraphs:

$('#tabs-2 p>a').click(function() {  }

Demo

Before asking for help here, I tried both of the options that you had mentioned. It seems not to show the alert. Popup blocker is deactivated on my browser. Bemused why the alert is not coming up.

[Gregg Bolinger]

Did you try the demo link I provided? Does it also not work? What browser and what version of jQuery are you using?

[Joe San]

I'm attaching a screenshot of the page that contains this href

[Joe San]

The demo seems to work, but why not on my machine? I use firefox 4.0. Has it got anything to do with the other jQuery functions that I have in my page?

[Gregg Bolinger]

Joe Harry wrote:The demo seems to work, but why not on my machine? I use firefox 4.0. Has it got anything to do with the other jQuery functions that I have in my page?

Try your local copy without the extra stuff (like your UI .tabs() function) and see what happens.

Use a tool like Firebug to inspect the elements after jQuery UI has gotten hold of everything and see if the markup was changed in a way that would cause the selector to stop working.

[Joe San]

Yes, I did use Firebug to find out what gets rendered. Here it is:

<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<p >
This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs
and you will find ample resources to articles and certifications.
<br>
<br>
The following sample exams are available. (This will be iterated and shown here)
<br>
<br>
<a >Java Test 1</a>
: Focus on Collections and Generics
<br>
<br>
<a >Java Test 2</a>
: Focus on Constructor and Object creation
<br>
<br>
<a >Java Test 3</a>
: Focus on Constructor and Object creation
<br>
<br>
<a >Java Test 4</a>
: Focus on Constructor and Object creation
<br>
<br>
<a >Java Test 5</a>
: Focus on Constructor and Object creation
</p>
</div>

Looks like the selector should work

[Joe San]

The entire html body after rendering:

<div class="main">
<div>
<div class="mainContent">
<div class="menu" style="float:left;width:175px">
<link rel="Stylesheet" href="/Quintilis31Web/css/common/jquery-ui-1.8.14.custom.css" type="text/css">
<script src="/Quintilis31Web/js/common/jquery-1.5.1.min.js" type="text/javascript">
<script src="/Quintilis31Web/js/common/jquery-ui-1.8.14.custom.min.js" type="text/javascript">
<script type="text/javascript">
<div class="content">
<div class="item">
<div class="item">
<script>
<div id="mockExamTabs">
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="height:420px;">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top">
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<p >
This page has a lot to offer. But it is in the very beggining of its inception... Just browse through
the tabs and you will find ample resources to articles and certifications.
<br>
<br>
The following sample exams are available. (This will be iterated and shown here)
<br>
<br>
<a >Java Test 1</a>
: Focus on Collections and Generics
<br>
<br>
<a >Java Test 2</a>
: Focus on Constructor and Object creation
<br>
<br>
<a >Java Test 3</a>
: Focus on Constructor and Object creation
<br>
<br>
<a >Java Test 4</a>
: Focus on Constructor and Object creation
<br>
<br>
<a >Java Test 5</a>
: Focus on Constructor and Object creation
</p>
</div>
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-6" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>

[Gregg Bolinger]

Yep, seems like it should. Did you attempt it without rendering the UI tabs? Also, try adding a class to each anchor and use that as the only selector and see if it works. Get as specific as you can with your selector.

<a class='click-me' rel="nofollow">fdsfdsf</a>

$('.click-me').click(function() { });

[Joe San]

Gregg Bolinger wrote:Yep, seems like it should. Did you attempt it without rendering the UI tabs? Also, try adding a class to each anchor and use that as the only selector and see if it works. Get as specific as you can with your selector.

<a class='click-me' rel="nofollow">fdsfdsf</a>

$('.click-me').click(function() { });

Did not work as well.

Here, again the complete html.

<html xmlns="http://www.w3.org/1999/xhtml"><head>
     <meta content="text/html; charset=iso-8859-1" http-equiv="content-type">
     <meta content="description" name="description">
     <meta content="keywords" name="keywords">
     <meta content="author" name="author">
     <link href="/Quintilis31Web/css/common/default.css" type="text/css" rel="stylesheet">
     <title>JUG Chennai</title>
 </head>
     <body>
     <div class="main">
         

	<div>
	  <h1 align="right">public Welcome jCerticles (Object all) { ...</h1>
	</div>

         <div class="mainContent">
             

	<div style="float:left;width:175px" class="menu">
		<a >                <span>Home</span></a>
		<a >  <span>Mock Exams</span></a>
		<a >  <span>Articles</span></a>
		<a >  <span>Code Samples</span></a>		
		<a >             <span>Registration</span></a>		
		<a >  <span>Contact</span></a>
	</div>



             
<link rel="Stylesheet" href="/Quintilis31Web/css/common/jquery-ui-1.8.14.custom.css" type="text/css">	
<script src="/Quintilis31Web/js/common/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Quintilis31Web/js/common/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>

<div class="content">		
    	<div class="item">
		<h1>Mock Exams and Stuff</h1>
		<p>Please click on the tabs below to learn more!</p>
	</div>
	<div class="item">
		<script>
		$(function() {
			$( "#tabs" ).tabs({
				event: "mouseover"
			});
		});

$('.click-me').click(function() {  
  alert('Handler for .click() called.');  
});
		</script>
		<div id="mockExamTabs">
			<div style="height:420px;" id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
				<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
				  <li class="ui-state-default ui-corner-top"><a >Read Me</a></li>
				  <li class="ui-state-default ui-corner-top"><a >Core Java</a></li>
				  <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a >JSP and Servlets</a></li>
				  <li class="ui-state-default ui-corner-top"><a >JSF</a></li>
				  <li class="ui-state-default ui-corner-top"><a >EJB</a></li>
				  <li class="ui-state-default ui-corner-top"><a >JPA</a></li>
				  <li class="ui-state-default ui-corner-top"><a >Spring</a></li>
				  <li class="ui-state-default ui-corner-top"><a >Other Frameworks</a></li>
				</ul>
			    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
				  <p >XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications...
					Why on earth would you do something like this?
					This is not really interesting... Go and watch some movies that are newly released...
					
				  </p>
			    </div>
			    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
				  <p >
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.<br><br>
					
					The following sample exams are available. (This will be iterated and shown here)<br><br>
					<a  class="click-me" rel="nofollow">Java Test 1</a> : Focus on Collections and Generics<br><br>
					<a >Java Test 2</a> : Focus on Constructor and Object creation<br><br>
					<a >Java Test 3</a> : Focus on Constructor and Object creation<br><br>
					<a >Java Test 4</a> : Focus on Constructor and Object creation<br><br>
					<a >Java Test 5</a> : Focus on Constructor and Object creation					
				  </p>
			    </div><div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-6" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
		    </div>
	    </div>
    </div>
</div>

         </div>
         <div class="footer">
             


	<span class="left">© Java User Group Chennai 2010</span>

	<span class="right"><a href="mailto:[e-mail]" rel="nofollow">Contact Java User Group Chennai</a></span>

	<div class="clearer"><span></span></div>

         </div>
     </div>
     
</body></html>

[Gregg Bolinger]

I just noticed that your binding to the click event is happening outside of jQuery's ready function. That's probably why it isn't working for you.

[Joe San]

Spot on. Thanks for the suggestion. But can't a page have more than one ready function? I thought I have have as many as I wish on my page.

[Bear Bibeault]

Yes, a page can have as many ready handlers as you like.

[Joe San]

What is wrong with the following snippet?

		<script>
		$(function() {
			  $( "#tabs" ).tabs({
				event: "mouseover"
			  });
			$('.click-me').click(function() {  
			  alert('Handler for .click() called.');
			  $('#tabs-2').hide();
			  $('#resultDiv').empty();
			  $('#resultDiv').append('helo world!</br><a class="backAnch"  href="#">Back</a>'); 
			});
			$('.backAnch').click(function() {  
			  alert('Handler for #backAnclas() called.');
			  $('#tabs-2').show();
			  $('#resultDiv').hide(); 
			});
		});
		</script>

The backAnch does not get triggered?

[Bear Bibeault]

Are there elements with the backAnch class?