Afshin Haghighat Afshin Haghighat - 4 years ago 181
CSS Question

an anchor link in bootstrap tooltip`s title doesn`t act like an anchor on click

I am using bootstrap tooltip to add some info to an SVG path. I added an anchor link to tooltip's title and it's OK until I click on the anchor to do something. It doesn't act like an anchor, and does not raise any events.

This is the code:

<g id="B2" class="blockgroup">
<path id="B2_Block" class="block" d="M195.4,128.9c-28,18.2-51.9,42.2-70.1,70.2l33.3,19.3c14.8-22.6,34-42,56.5-57L195.4,128.9z"/>
<text id="B2_Text" transform="matrix(1 0 0 1 166.0186 177.8625)" class="text">B2</text>
</g>

$('.blockgroup').tooltip({
html: true,
animation: true,
container:'body',
trigger: 'click',
title: function(){
return '<div class="tooltip-box">' +
'<span>Block</span>' +
'<h3>' + this.id + '</h3>' +
'<a href="#" class="view-seats" data-block-id="' + this.id + '">View Seats</a>' +
'</div>';
}

});


$('.view-seats').on('click', function(e){
e.preventDefault();
console.log('clicked');
});

Answer Source

When you initialize click handler .view-seats element hasn't been added to DOM yet. This element is added to DOM after tooltp is shown. This should work:

$(document).on('click', '.view-seats', function(e){
    e.preventDefault();
    console.log('clicked');
})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download