specfic element cannot be selected with jquery

Question

I am making a website, I want to change the content of the page on clicking certain sections. I have CSS, HTML, JS is seperate files. I am a noob. Using jquery I am getting an alert when I give the tag("*")to select all elements, but for the life of me I am not able to select a specific div. all divs are unique but I really don't why the query cannot select the particular divs.

 $('*').click(function()
    {     alert("The paragraph was clicked.");
     });

----> working

but this is not

    $('#topbar').click(function(){ 
        alert("The paragraph was clicked.");
     });

here is the entire code:

<!doctype html>
<html>
<head>
 <title>dear C</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" type="text/css" href="bbc.css">
 </head>
 <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
 <script type="text/javascript" src="jquery-2.1.3.min.js">
 </script> 
 <script type="text/javascript" src="resume.js">
 </script> 
<body>

 <div id="container">
  <div id="topbar">
  <div id="logo">
  </div>
  <div id="contact">
    <div id="facebook">
    <a href="https://www.facebook.com/dipranjan.chatterjee"></a></div>
    <div id="mail">
    <a href="mailTo:dipranjan.chatterjee@gmail.com"></a></div>
    <div id="blog">
    <a href="http://chotochotodukhoktha.blogspot.in/"></a></div>
  </div>
  <div id="name"> Dip Ranjan Chatterjee</div>
  </div>
  <div id="bottom">
  <div id="sidebar">
   <div id="about">About</div>
   <div id="border"></div>
   <div id="edu">Education</div>
   <div id="border2"></div>
   <div id="prof">Professional Exp.</div>
   <div id="border3"></div>
   <div id="portfolio">Portfolio</div>
  </div>
  <div id="contents"><p>

<p>Feel free to drop me a mail or message, if you need to get in touch with me.</p>
  </div>
 </div>

</body>

Also note i have CSS html and JS all in seperate files. In the JS file i am putting the jquery.

Have you read: http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — David says reinstate Monica, Feb 08 '15 at 15:50
Just check whether there is a div with that id and you adding the listener after the document ready only — Mukesh Agarwal, Feb 08 '15 at 15:52

score 1 · Accepted Answer · answered Feb 08 '15 at 15:56

1

Make sure that you dont have multiple divs with the same id(#topbar in that case), and you are adding the listener after the document is loaded.

$(document).ready(function(){
    $('#topbar').click(function(){
        alert("The paragraph was clicked.");
    });
});

answered Feb 08 '15 at 15:56

Tom

48
3

Thanks a lot .. this worked. I am new to jquery can you please let me know, what is the specilaity of the ready function? – Dip Chatterjee Feb 09 '15 at 03:02
@DipRanjanChatterjee Please read the documentation: [link](http://api.jquery.com/ready/) Basically before the page is "ready" the elements aren't loaded in the DOM, the #topbar isn't exists yet. – Tom Feb 09 '15 at 08:26

score 0 · Answer 2 · answered Feb 08 '15 at 15:58

Show all your HTML code

The identifier id="topbar" exist?
id="topbar" is unique in the HTML?
You are declaring the script after loading the HTML?

<div id="topbar">Go</div>
<div id="topbar2">Go2</div>

<script type="text/javascript">
$('#topbar').click(function(){ 
    alert("The paragraph was clicked.");
});
</script>

<!-- works -->

specfic element cannot be selected with jquery

2 Answers2