Link within div is not clickable when Jquery hide() and show() are used on containing div

Question

I am having a problem with a link that sits inside of a div on my page. Currently, when the link is clicked, nothing happens. I do not understand why, but I imagine it has to do with the use of hide() and show() on the containing div which I will explain below.

The div is part of a custom "accordion" which uses the following Jquery to open/close the proper div's when a header is clicked:

   $('.accordion .head').click(function () {
     $('.accordion .head').next().hide();
     $('.accordion .head').removeClass("active");

     $(this).next().show('fast');
     $(this).addClass("active");
     return false;
});

I understand that there are better ways to achieve the "accordion" behavior, but because this is used across our website I do not have the option of updating the accordion to use the actual Jquery accordion() method without making a lot of extra work for myself.

So, given the sample code below can anybody help me understand what the problem is here, or how to overcome it?

<div class="accordion">
  <div class="head active"><a href="#">Heading 1</a></div>
  <div class="accordion-content first">
      <p>
           Some text here
      </p>
      <div class="accordion-logos"> 
      </div>
  </div>            
  <div class="head"><a href="#">Heading 2</a></div>
  <div class="accordion-content">
      <p>
          Some other text here 
      </p>
      <p>
          <a href="http://www.google.com">http://www.google.com</a>                                    
      </p>
  </div>            
</div>

I can't even get the click to register when I handle it specifically, the alert in the code below never fires when the link is clicked:

  $('.accordion .accordion-content #thelink').click(function () {
    alert();
  });

Thank You,

Rose

[this JSfiddle example](http://jsfiddle.net/DrS5f/) with the code you've provided dosn't block the google link from firing which leads me to believe there must be some other Javascript hijacking the click event than youve provided — Simon West, Aug 15 '12 at 15:49
Hi Simon, Thank you for your help with this. I viewed the JSfiddle example and I can see that you are right, the link should work unless there is some other javascript preventing that. I am going to have to shut off one script at a time until I can figure out the cause here. Thank you for taking the time to look at this! — Lindsay Rose, Aug 15 '12 at 16:19
@LRose: I edited my answer, now that I understand the problem correctly, with a few suggestions on how to pinpoint what could be wrong. — Nope, Aug 15 '12 at 16:25

score 2 · Answer 1 · answered Jun 11 '14 at 10:05

I was having a problem with links not being clickable and I came across this post to try and find an answer. The problem was, after jquery hide() was fired on a div element below my header, the links in my header were not clickable. I changed my code to slideUp() instead of hide() and the links were clickable. I'm not sure if this solves your question specified in this post but seeing as it is related I thought I would share it as it might help anyone who comes across this post. It's not as suitable as .hide() but a usable workaround.

$('#mydiv').slideUp();

Nope · Accepted Answer · 2012-08-15T16:13:40.150

1

Seems I misunderstood you the first time around.

If the google link doesn't fire then there is either something blocking a links, overwriting the href of the links or maybe even another element is in front of it and you can't click the link.

If someone wanted to block the link to work they could do something like this:

$('.accordion .accordion-content a').click(function(){
    return false;
});

If you want to check if that is the case you can try unbinding everything and check if you can click the link then:

$('.accordion .accordion-content a').unbind('click');

Also check your html output to see what the href value is set to, maybe someone has overwritten it.

Just go to the rendered page and right-click and select view-source. Search for the google link and check the href value.

edited Aug 15 '12 at 16:13

answered Aug 15 '12 at 15:37

Nope

22,147
7
47
72

Hi Francois, You are correct, Before I posted I accidentally removed the id on the link. I tried out both of the options you provided, and even though it clearly should work based on the demo's you provided, I am still not getting the alert on the actual page. I am really starting to think that another script on the page is causing problems here. Thanks so much for reviewing this! – Lindsay Rose Aug 15 '12 at 16:23
@LRose: I updated my answer now. I misunderstood your problem originally. I added some suggestions on how to help you troubleshoot why the link is not letting you click it. I'm assuming we are talking about you not being able to get the google link to fire :) – Nope Aug 15 '12 at 16:26
Hi Francois, Thanks again for your help here, this is so mysterious! I tried the second snippet you provided but the link is still not clickable, I also reviewed the rendered page content and the href value is complete. I think that you may have something were you mentioned another element on the page could be blocking the link from being clicked. I am going to have to dig through the css for all of the elements on the page to see if there is something that could be doing that. Thanks again for all of your help! – Lindsay Rose Aug 15 '12 at 17:10

score -1 · Answer 3 · answered Aug 15 '12 at 15:37

-1

Why are you using #thelink? if i just replace it with a it works.

$(function(){
   $('.accordion .head').click(function () {
    $('.accordion .head').next().hide();
    $('.accordion .head').removeClass("active");

    $(this).next().show('fast');
    $(this).addClass("active");
    return false;
  });

  $('.accordion .accordion-content a').click(function () {
   alert();
  });
})

answered Aug 15 '12 at 15:37

KoU_warch

2,160
1
25
46

Hi EH_warch, I am using an id only because I had already tested selecting any link in the div. I am sure that this would work even better than using a specific id, because I can customize the function to work for any link. Thank you for reviewing my question! – Lindsay Rose Aug 15 '12 at 16:26
well ids are unique to the page so there is no need for you to use a selector of the type 'class id'. And i suggested you to use the anchor selector because there was no id on your HTML – KoU_warch Aug 15 '12 at 17:13

Link within div is not clickable when Jquery hide() and show() are used on containing div

3 Answers3