带有嵌入式 onclick 的 jquery 工具提示答案

【问题标题】：jquery tools tooltip with embedded onclick带有嵌入式 onclick 的 jquery 工具提示
【发布时间】：2012-02-16 06:33:21
【问题描述】：

我在图像上使用 jquery 工具工具提示。这是工具提示的基本用法，当有人翻过图像时，背景图像会变暗，并且工具提示会弹出并显示“点击查看详细信息”，到目前为止这一切都很好。我希望工具提示实际上是可点击的，这样它将打开一个包含图像详细信息的覆盖窗口。我不知道该怎么做？ html 内容只是一个带有 .albumImage 类和 img src 的 div，几乎直接来自指南。我的脚本如下...

$(".albumImage img[title]").tooltip({

    position: 'top center',
    offset: [80,0],

    onShow: function() {
    this.getTrigger().fadeTo("0", 0.3);
    },
    onHide: function() {
    this.getTrigger().fadeTo("0", 1.0);
    }

});

【问题讨论】：

标签： jquery onclick jquery-tools tooltip

【解决方案1】：

只需在设置工具提示之前添加点击处理程序：

$(".albumImage img[title]").click(function(){
    alert('Hello!');
});


$(".albumImage img[title]").tooltip({
    position: 'top center',
    offset: [80,0],
    onShow: function() {
        this.getTrigger().fadeTo("0", 0.3);
    },
    onHide: function() {
        this.getTrigger().fadeTo("0", 1.0);
    }
});

【讨论】：

【解决方案2】：

考虑到您的.tooltip() 可能会在您悬停图像时在页面内生成一些 DOM。假设 DOM 是<div id='tooltip'>blah blah blah</div>。

最后通过.tooltip()函数将点击事件附加到生成的DOM上。

$(".albumImage img[title]").tooltip({

    position: 'top center',
    offset: [80,0],

    onShow: function() {
        this.getTrigger().fadeTo("0", 0.3);
        $('#tooltip').click(function () {
            //Write your code to open up a lightbox showing 
            //the respective image and its details.
        });
    },
    onHide: function() {
        this.getTrigger().fadeTo("0", 1.0);
    } 

});

【讨论】：