jQuery, access div inside a div

Question

<div id="pic">
  <div id="left">
    <img src="images/left.png" />
  </div>
  <div id="right">
   <img src="images/right.png" />
  </div>
</div>

I want to hide the div with id "right" when I click on the div with id "left"

Code I am using:

$("#left").click(function(){$("#right").hide();});

This is not working, what is the reason? And how will I achieve what I intend to?

Answer 1

Your code seems to be fine, but looks like you are missing the jQuery's ready event, try this:

$(function(){
 $("#left").click(function(){
   $("#right").hide();
  });
});

Note: $(function(){ is short form of ready event code.

Answer 2

Your code is correct and works for me.

Something else is wrong.

Try setting up the handler in document.ready

$(document).ready(function() {

  $("#left").click(function() { $("#right").hide(); });


});

Answer 3

Some possibilities:

1. did include the jquery.js file in the html head
2. are there no bugs in the preceding javascript before that jquery line? They could stop execution before reaching that point.
3. are the id's unique? Maybe you have multiple elements with id='right'?

Answer 4

The click event can only be added after the #left div has loaded. For this reason wrap your existing jquery in a domready call.

$(document).ready(function(){
     $("#left").click(function(){$("#right").hide();});
});

Answer 5

There are one of three things wrong, since your code is technically correct:

1. Your click function does not appear in your $(document).ready function
2. Your page repeats ids. Use classes instead.
3. Your divs are created dynamically and therefore not bound on $(document).ready

(1) is a simple fix. Just put in your $(document).ready. (2) just change your id attributes to classes, but if you want to make sure that you hide the correct div you may need to do some traversing. (3) can be fixed by using $(selector).bind('click', function(){}); or $(selector).live('click', function(){});

Good luck

Answer 6

Thanks guys.. as jason said... its that the divs are created dynamically.. got it working now...