Jquery click() function not working

Question

I have 2 anchor tags like this

<a href="#" id="1">1</a>
<a href="#" id="2" style="display:none;">2</a>

and Jquery functions like this

$(document).ready(function (){

 $('#1').click(function(){
      //code to show div 1
      //code to hide div 2

   });

   $('#2').click(function(){
       //code to show div 2
       //code to hide div 1
   });

});

Problem is when I click on "2" anchor tag, second div tag displays then when I want to again display div 1 by clicking "1" anchor tag it doesn't work. It's like after running 2nd function 1st function doesn't exist!

Updating Question with answer: I changed the selectors to like ques-1, ques-2 and if there are two selectors with same name jquery calls only first selector, so better give selector different names even if one of them is gonna be active one at a time

Your "code" looks fine. But we need the entire code to help you (and the html code too). — Magus, Dec 17 '12 at 12:45
@Magus: apart from the fact that `1` is not a valid `id` value (http://stackoverflow.com/a/79022/251311) — zerkms, Dec 17 '12 at 12:46
can you show the html and the entire jquery code used for this? — Merlin, Dec 17 '12 at 12:46
You cannot add event listeners to none existing elements! Use [`on()`](http://api.jquery.com/on/) to achieve this. — Ron van der Heijden, Dec 17 '12 at 12:48
Just change "1" to something like "link1" and "2" to "link2" and it should work. — Shadow The GPT Wizard, Dec 17 '12 at 12:51
change your IDs , please also post how to do u show and hide divs — Mahmoud Farahat, Dec 17 '12 at 12:52
Yes. As zerkms said, #1 is not a valid id. Try giving someother id say 'one'.http://jsfiddle.net/merlinrajaselvi/rCKgC/5/ — Merlin, Dec 17 '12 at 13:04

Bruno · Answer 1 · 2012-12-17T13:03:30.847

If you hide anchor 1 when you click anchor 2 then you will not be able to click anchor 1 as it will not be visible. If you want to leave the area taken up by the anchor element as clickable then you must animate the opacity.

$('#1').click(function(){
    $("#1").animate({ "opacity": "1"}, 1000);
    $("#2").animate({ "opacity": "0"}, 1000);

});

$('#2').click(function(){
    $("#1").animate({ "opacity": "0"}, 1000);
    $("#2").animate({ "opacity": "1"}, 1000);
});

Check out this fiddle

Jquery click() function not working

1 Answers1