I am using a jquery plugin called Tooltipster ( http://calebjacob.com/tooltipster/) and I am insterting some HTML into the tip which contains an href. If I click the link the page is opened as I expect. However, if I try to use that same href, add a class name and then try to fire a jquery function it will not fire. I have been pulling my hair out for hours trying to figure this out. Any help would be appreciated. Here is some stripped down code to illustrate an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="tooltipster.css" />
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.tooltipster.js"></script>
<script>
$(document).ready(function() {
$('.element').tooltipster({
animation: 'fade',
delay: 180,
offsetX: 0,
offsetY: 0,
onlyOne: true,
position: 'top',
maxWidth: '300',
speed: 150,
timer: 0,
theme: '.tooltipster-default',
interactive: true,
interactiveTolerance: 350,
updateAnimation: true,
trigger: 'custom',
interactive: true
});
$('.element').tooltipster('update', 'Select an Image from the right hand image list.<a class="update" href="#">Cancel Editing.</a>');
$('.element').tooltipster('show');
$('.update').click(function(){
alert("hello");
});
});
</script>
</head>
<body>
<a class="update" href="#">Hello</a>
<div align="center" class="element" title="Try clicking <a href='http://google.com'>this link</a>">
<p>This div has a tooltip when you hover over it!</p>
</div>
</body>
</html>
I put together a Fiddle to illustrate the issue. http://jsfiddle.net/bCqyL/
