Twitter Bootstrap Question posted in

Bootstrap Popover Element Inside A-Link; Prevent A-Link Click From Firing-Twitter bootstrap

I have a Bootstrap Popover Image which should display a popup. This IMG is inside an A-link which has its own Click Handler.

My goal is to prevent the Parent A-Click from firing; when you click the image, the only thing you see is the popup, but not the real A-Click action (the alert box).

I know that this is done via e.stopPropagation() but the problem is, how do I get access to Bootstrap Popover’s Click Handler? Where would I put e.stopPropagation?

$('[data-toggle="popover"]').popover();

$('#link').off('click.link').on('click.link', function() {
    alert('Clicked main link');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<a id="link" href="#" style="width:300px; height:100px; border:1px solid black;">Main Link

<img src="abc.png" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="PopOver Tooltip" aria-describedby="tooltip">
</a>

Let me show why the IMG has to be inside the A. The A’s are Accordion Menu Bars, and they all have a fixed width. You can go to a page by selecting a menu (you don’t have to click right on the text). Some menu items also have an INFO I icon that displays a popup. The action of the I-Icon should be to display the popover. The action of the A-link itself should be to go the page as normal.
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally solved it...

    $('[data-toggle="popover"]').popover();

$('#link').off('click.link').on('click.link', function(e) {
    e.preventDefault();
    if (e.target.nodeName != "IMG") {
      alert('Clicked main link');
    }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<a id="link" href="#" style="width:300px; height:100px; border:1px solid black;">Main Link

<img src="abc.png" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="PopOver Tooltip" aria-describedby="tooltip">
</a>


  2. 0

    Per our conversation in the comments I believe there are superior alternatives to relying on an anchor element to achieve this and would encourage you to explore alternatives like <button> since the purpose of this item seems to be better suited for that element.

    That being said, to address the question at hand:

    If you add a class to your anchor element so that you can target it via JavaScript your solution is quite simple:

    $('a.poplink').click(function(e) {
  e.preventDefault();
});

    This will prevent any anchor element with the class of poplink from processing a click-through event, without prohibiting the Bootstrap Popover event tied to your <img>.

    $('[data-toggle="popover"]').popover();

$('a.poplink').click(function(e) {
  e.preventDefault();
});
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a id="link" href="http://google.com" class="poplink" style="width:300px; height:100px; border:1px solid black;">
  Main Link
  <img src="abc.png" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="PopOver Tooltip" aria-describedby="tooltip">
</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search