CODEWITHSUNDEEP
jqueryhyperlinkshow-hideclickable
Lindsay Rose
Lindsay Rose

Reputation: 60

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

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

Upvotes: 3

Views: 991

Answers (3)

Sarah
Sarah

Reputation: 2003

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

Upvotes: 2

Nope
Nope

Reputation: 22339

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.

​

Upvotes: 1

KoU_warch
KoU_warch

Reputation: 2150

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

​

Upvotes: -1

Related Questions