Tooltipster plugin not firing jquery function when link in in the tooltip is clicked

问题

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/

回答1:

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;
    });    
});

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

来源：https://stackoverflow.com/questions/20433259/tooltipster-plugin-not-firing-jquery-function-when-link-in-in-the-tooltip-is-cli

标签

javascript

jquery

html

click

tooltipster