CODEWITHSUNDEEP
javascriptjqueryhtmlclicktooltipster
Rob
Rob

Reputation: 333

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/

Upvotes: 0

Views: 3422

Answers (1)

neyronius
neyronius

Reputation: 46

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/

Upvotes: 2

Related Questions