CODEWITHSUNDEEP
javascriptjqueryjquery-ui-accordion
NoWar
NoWar

Reputation: 37633

How to ignore jQuery accordion click event for the nested <a>

I have got this code

<div id="accordion">
  <h3>Section 1 <a href="www.google.com">Google</a> </h3>
  <div>
      Text...
  </div>
  <h3>Section 2</h3>
  <div>
   Text...
  </div>  
</div>

And I cannot get working <a> tag within a <h3> coz the jQuery accordion expan/collapse event happans.

How to avoid that event so <a> is working independently from accordion event?

Upvotes: 1

Views: 594

Answers (3)

NoWar
NoWar

Reputation: 37633

I found solution that is working fine for me.

<div id="accordion">
  <h3>Section 1 <a href="www.google.com" class="openLink" onclick="OpenLink(this);">Google</a> </h3>
  <div>
      Text...
  </div>
  <h3>Section 2</h3>
  <div>
   Text...
  </div>  
</div>

 function OpenLink(element)
    {
        console.log(element.href);
        window.location = element.href;
        return false;
    }

and there is another solution

$('.openLink').bind('blur change click error keydown keypress keyup mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup', function (event) {
            event.stopPropagation();
        });

Upvotes: 1

josedefreitasc
josedefreitasc

Reputation: 221

The event propagate, you could stop the event propagation when someone click over the <a> tag. I believe this could work.

$(document).on('click', '.link', function (e) {e.stopPropagation();});

Add the class link to the <a> if you want 'link' has a selector.

<div id="accordion">
  <h3>Section 1 <a class="link" href="www.google.com">Google</a> </h3>
  <div>
    Text...
  </div>
  <h3>Section 2</h3>
  <div>
    Text...
  </div>  
</div>

Upvotes: 2

Corey Young
Corey Young

Reputation: 570

can you post the code or a link to the jquery plugin that you are using? It sounds like the jquery code is running the function preventDefault() and the a tag is bubbling up and hitting that event.

you could wrap an event on the anchor like 

$('#accordian').on('click', 'a', function(e) {
    e.stopPropogation();
    window.location.href = this.href;
});

now becareful with this code if you add an element inside the anchor tag. If you click on that element it won't be the anchor starting the event and it would have the href attribute.

Upvotes: 2

Related Questions