jQuery .click function not working

Question

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>

It seems like your last $(function() { ... chunk has not initiated. Try to remove the $(function () part and just run those $("resourceslink).click(...). If you need to wrap, try ($(function() {...})() Hope that helps. Also, id cannot be assigned multiple times, use class instead. — VKen
– VKen, Commented Oct 11, 2012 at 18:11

harry · Accepted Answer · 2012-10-11 18:38:20Z

1

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.

answered Oct 11, 2012 at 18:38

harry

1,5323 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maktouch Over a year ago

Don't use .live(), it's deprecated: api.jquery.com/live and it's not performant at all.

Maktouch · Accepted Answer · 2012-10-11 20:01:48Z

1

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();
})

answered Oct 11, 2012 at 20:01

Maktouch

3,24723 silver badges21 bronze badges

Comments

Rasmus Bech · Accepted Answer · 2012-10-11 18:12:14Z

0

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 :)

answered Oct 11, 2012 at 18:12

Rasmus Bech

842 silver badges8 bronze badges

Comments

Fox32 · Accepted Answer · 2012-10-11 18:19:29Z

0

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();
});

edited Oct 11, 2012 at 18:19

answered Oct 11, 2012 at 18:12

Fox32

13.7k9 gold badges53 silver badges71 bronze badges

1 Comment

alrightgame Over a year ago

Why does this happen and how do I fix it?

Collectives™ on Stack Overflow

jQuery .click function not working

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related