【问题标题】:Tooltipster plugin not firing jquery function when link in in the tooltip is clicked单击工具提示中的链接时,Tooltipster 插件未触发 jquery 功能
【发布时间】:2013-12-06 20:44:58
【问题描述】:

我正在使用一个名为 Tooltipster (http://calebjacob.com/tooltipster/) 的 jquery 插件,并且我正在将一些 HTML 插入到包含 href 的提示中。如果我单击该链接,该页面将按预期打开。但是,如果我尝试使用相同的 href,添加一个类名,然后尝试触发一个 jquery 函数,它不会触发。我已经拉了几个小时的头发试图弄清楚这一点。任何帮助,将不胜感激。下面是一些精简的代码来说明一个例子。

<!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>

我整理了一个 Fiddle 来说明这个问题。 http://jsfiddle.net/bCqyL/

【问题讨论】:

    标签: javascript jquery html click tooltipster


    【解决方案1】:

    当您为 .udpate 元素设置点击处理程序时,jquery 还不知道具有此类的元素。这就是为什么 handler 没有在你的例子中设置。相反,请使用其他方法,处理文档的所有点击并选择仅针对 .update 元素的地址。

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-12
      • 1970-01-01
      • 2011-06-26
      • 2011-01-26
      • 2021-10-29
      相关资源
      最近更新 更多