CODEWITHSUNDEEP
jquery
alrightgame
alrightgame

Reputation: 391

jQuery .click function not working

I have a snippet of HTML that when a link is clicked, the div content becomes the linked div content. The first function works fine. It is the second click on #hidelink that jQuery doesn't seem to respond. What am I missing here?

<div id="right">
    <div id='titletext'><p>||||||||||||||</p></div>
    <div id='presentation'></div>

    <div class='hidethisdiv'>
        <div id ="years">
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
        </div>
        <div id='resources'>    
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
            <p><a id='hidelink' href='#years'>&laquo;--back</a></p>
        </div>
    </div>
</div>

<script type="text/javascript">// <![CDATA[
  $('#mainmenu').fadeIn(2000, function() {
    // Animation complete.
  });

$('#presentation').html($('#years').html());

$( function() {
  $("#resourceslink").click(
    function () {
    $('#presentation').html($('#resources').html());
    }
   );

  $("#hidelink").click(
  function (){
    $('#presentation').html($('#years').html());
  }
  );
  //just add more divs like resources and a hidelink for new conferences
});
</script>

Upvotes: 0

Views: 2319

Answers (4)

Maktouch
Maktouch

Reputation: 3247

First, an ID is unique. It must only exist once! In your example there is 2 x resourceslink.

If you have multiple element you want to group, use classes. Reminder: you can have multiple classes per element! For example 

<a href="#hey" class="testing hello">heyhey</a>

You can call this with 

$(".testing") - or - $(".testing.hello")  - or - $(".hello")

and attach events listener like this 

$(".testing").on("click", function() { 
    doThis();
})

Upvotes: 1

harry
harry

Reputation: 1522

You can use the jquery hide and show as below also.

$("#hidelink").live('click',function () {

$('#resources').hide();

$('#years').show();

});

If you are using firefox as your browser,you can use firebug which is an add on.By putting break points on the scripts using firebug will get you an idea on what went wrong.

Hope this will help you.

Upvotes: 1

Fox32
Fox32

Reputation: 13570

Using $('#resources').html() the element is converted to html. You later read it in. The problem is you bound the click event to #hidelink befor the html is parsed. The event is linked to the hidden element instead.

One solution could be linking the click event after you added the content to #presentation. Another problem is that #hidelink is not unique anymore after adding the html to #presentation.

A better solution would be not to use .html(). Add all you elements to #presentation and hide them with display: none. Then bind the click events and use .show() and .hide() to display #years or #resources

Example:

<div id="right">
    <div id='presentation'>
        <div id ="years">
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
        </div>
        <div id='resources' style="dislay: none">    
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
            <p><a id='hidelink' href='#years'>&laquo;--back</a></p>
        </div>
    </div>
</div>


$("#resourceslink").click(function () {
    $('#resources').show();
    $('#years').hide();
});

$("#hidelink").click(function () {
    $('#resources').hide();
    $('#years').show();
});

Upvotes: 0

Rasmus Bech
Rasmus Bech

Reputation: 84

In your shown code you have a space between id and the value ;) also, ids are unique so having to a's with id="resourceslink" is bad practice :)

Upvotes: 0

Related Questions