单击工具提示中的链接时，Tooltipster插件不会触发jquery函数

Question

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. 我正在使用一个名为Tooltipster的jquery插件（ http://calebjacob.com/tooltipster/ ），我正在将一些HTML包含在包含href的tip中。 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. 但是，如果我尝试使用相同的href，添加一个类名，然后尝试触发一个jquery函数，它将不会触发。 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/ http://jsfiddle.net/bCqyL/

Answer 1

When you set click handler for .udpate element, jquery has not known about elements with this class yet. 当你为.udpate元素设置click handler时，jquery还不知道有关这个类的元素。 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. 相反，请使用另一种方法，处理文档的所有点击，并仅选择针对.update元素的地址。

$(function(){
    $(document).on('click', '.update', function(){
        alert('hello');
        return false;
    });    
});

http://jsfiddle.net/bCqyL/3/ http://jsfiddle.net/bCqyL/3/

单击工具提示中的链接时，Tooltipster插件不会触发jquery函数

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-01-28 14:09:55

单击工具提示中的链接时，Tooltipster插件不会触发jquery函数

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-01-28 14:09:55

解决方案1
2 已采纳 2014-01-28 14:09:55