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.
2
Answers
I finally solved it...
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:
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>
.