jQuery Cluetip 直到悬停或单击事件后才激活答案

【问题标题】：jQuery Cluetip not activated until after hover or click eventjQuery Cluetip 直到悬停或单击事件后才激活
【发布时间】：2010-04-19 22:17:49
【问题描述】：

我不确定是什么原因造成的，但我正在使用提示提示并将其绑定到实时事件（单击或鼠标输入），但在每种情况下提示提示直到单击或悬停事件后才会触发。我正在为 ajax 加载的内容使用实时事件，但我也遇到了非 Ajax 加载的内容的问题。我不确定为什么会发生这种情况 - 任何人都可以看到我可能出错的地方吗？非常感谢。

$("a.jTip").live("click", function(){
            $('a.jTip').cluetip({
                attribute: 'href',
                cluetipClass: 'jtip',
                arrows: true,
                activation: 'click',
                ajaxCache: false,
                dropShadow: true,
                sticky: true,
                mouseOutClose: false,
                closePosition: 'title'
            })
            return false;
        });

【问题讨论】：

标签： javascript jquery cluetip

【解决方案1】：

那是因为您要等到第一个事件之后才进行设置。换句话说，您正在处理事件（显然）并在处理程序中设置了设施。该特定事件不会触发线索提示代码。

除了这样做，您可以考虑确保动态添加内容的代码始终直接调用“cluetip”设置，或者调查“LiveQuery”插件在 DOM 更改时执行“自动”工作。我个人会采用前一种方法，但显然很多人使用 LiveQuery 时效果很好。

【讨论】：

我已经接受了你的第一个建议，这很好用，它只是意味着对线索提示的直接调用有一点重复，但我认为我宁愿这样做而不是加载一个额外的插件.感谢您的帮助！

【解决方案2】：

你仍然可以使用livequery() plugin，这就是它的样子：

$('a.jTip').livequery(function() {
  $(this).cluetip({
    attribute: 'href',
    cluetipClass: 'jtip',
    arrows: true,
    activation: 'click',
    ajaxCache: false,
    dropShadow: true,
    sticky: true,
    mouseOutClose: false,
    closePosition: 'title'
  });
});

.live() 没有完全替换 .livequery()，它的行为方式不同。如果您仍想查找与选择器匹配的当前和新元素，.livequery() 或绑定作为 ajax 回调的一部分（例如，在您的成功中，如 $('a.jTip', data)）是最佳途径。

【讨论】：

【解决方案3】：

因为在第一次点击之后才会初始化提示提示。

试试：

    $("a.jTip").live("mousedown", function(event){
        $('a.jTip').cluetip({
            attribute: 'href',
            cluetipClass: 'jtip',
            arrows: true,
            activation: 'click',
            ajaxCache: false,
            dropShadow: true,
            sticky: true,
            mouseOutClose: false,
            closePosition: 'title'
        })

        event.preventDefault();
    });

虽然线索提示会被初始化多次，那怎么样：

    $("a.jTip").live("mousedown", function(event){
        var self = $(this);

        if (!self.data('cluetip-initd')) {
          self.cluetip({
              attribute: 'href',
              cluetipClass: 'jtip',
              arrows: true,
              activation: 'click',
              ajaxCache: false,
              dropShadow: true,
              sticky: true,
              mouseOutClose: false,
              closePosition: 'title'
          }).data('cluetip-initd', true);
        };

        event.preventDefault();
    });

【讨论】：

是的，“多次初始化”部分可能是个问题。

【解决方案4】：

您正在绑定click 事件的线索提示。这就是它在剪辑后绑定到线索提示的原因。从发布的代码中删除点击，它应该可以正常工作。

【讨论】：

【解决方案5】：

cluetip 函数修改元素以赋予其工具提示行为。您的代码仅在用户单击元素时执行该修改。您希望在元素加载时发生这种情况，而不是在单击时发生。

您似乎认为cluetip 函数实际上会弹出工具提示，因此您需要将它包含在元素的click 处理程序中。事实并非如此。函数设置元素为工具提示，并自行处理点击/鼠标悬停。

【讨论】：