CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Rits
Rits

Reputation: 47

Jquery click event inside an anchor tag

I am using bootstrap for CSS styling and responsive site.

I created a default panel with Bootstrap and the entire panel is made clickable with anchor tag to open in a new tab. However, there needs to be a close icon to dismiss the panel; and I am using javascript for the same. The problem arises when I click on this close icon - Though the panel is dismissed, I am also having a new tab opened due to the anchor tag. Is there a way to avoid this new page opening.

Code looks something like this:

<div class="panel panel-default">
  <div class="panel-body">
    <a href="#" target="_blank">
      <p>Basic panel example</p>
      <button type="button" class="close" id="close">&times;</button>
    </a>
  </div>
</div>

So I have the javascript to dismiss panel for id="close". Clicking the same though, also results in anchor redirect. One possible way is to use CSS for relative positioning of the closing icon outside the anchor tag. But that is getting messed up for my requirement for a smaller size screen.

How can I accomplish it with javascript?

Upvotes: 2

Views: 3139

Answers (1)

Tiziano Rossi
Tiziano Rossi

Reputation: 603

If i understand correctly you have to call the method preventdefault on the event object.
Here you can find the specification: jquery preventdefault

So you have to do something like this:

$("#close").click(function(e)
{
    e.preventDefault();
    $("#mypanel").close();

});

I re-create the case here: http://jsfiddle.net/x4nu0whw/
Hope this helps!

Upvotes: 3

Related Questions