点击工具提示中的链接时，Tooltipster插件不会触发jquery函数 [英] Tooltipster plugin not firing jquery function when link in in the tooltip is clicked
问题描述
我正在使用名为Tooltipster的jquery插件（ http://calebjacob.com/tooltipster/ ）和我将一些HTML插入包含href的提示中。如果我点击链接，页面就像我期望的那样打开。但是，如果我尝试使用相同的href，请添加一个类名称，然后尝试激发它不会触发的jquery函数。试图弄清楚这一点，我一直把我的头发拉出几个小时。任何帮助，将不胜感激。
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>无标题文档< / title>
< link rel =stylesheettype =text / csshref =tooltipster.css/>
< script language =javascripttype =text / javascriptsrc =Scripts / jquery-1.8.0.min.js>< / script>
< script language =javascripttype =text / javascriptsrc =Scripts / jquery.tooltipster.js>< / script>
< script>
$（document）.ready（function（）{
$（'。element'）。tooltipster（{
animation：'fade'，
delay：180，
offsetX：0，
offsetY：0，
onlyOne：true，
位置：'top'，
maxWidth：'300'，
速度：150，
计时器：0，
主题：'.tooltipster-default'，
交互式：true，
interactiveTolerance：350，
updateAnimation：true，
触发器：'custom'，
interactive：true
}）;
$（'。element'）。tooltipster（'update'，'从右手图像中选择图像< a class =updatehref =＃>取消编辑。< / a>'）;
$（'。element'）。tooltipster（'show'）;
'（'。update'）。click（function（）{
alert（hello）;
}）;
}）;
< / script>
< / head>
< body>
< a class =updatehref =＃>你好< / a>
< div align =centerclass =elementtitle =尝试点击< a href ='http：//google.com'>此链接< / A>中>
< p>当您将鼠标悬停在其上时，此div有一个工具提示！< / p>
< / div>
< / body>
< / html>
我把小提琴放在一起来说明问题。
http://jsfiddle.net/bCqyL/
$（函数（）{
$（document）.on（'click'，'.update'，function（）{
alert（'hello'）;
return false;
} ）;
}）;
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/
When you set click handler for .udpate element, jquery has not known about elements with this class yet. This is why handler does not set in you example. Instead please use an other approach, that handles all clicks for the document and selects only addressed for .update elements.
$(function(){
$(document).on('click', '.update', function(){
alert('hello');
return false;
});
});
这篇关于点击工具提示中的链接时，Tooltipster插件不会触发jquery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
