Question

我不确定导致这种情况的原因，但是我使用cluetip并将其绑定到实时事件（click或mouseenter），但在每种情况下，直到一次点击或悬停事件之后才会触发cluetip。我正在为ajax加载的内容使用live事件，但我也遇到了非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;
        });

Answer 1

那是因为你没有在第一次事件之后设置它。换句话说，您正在处理事件（显然）并在处理程序中设置工具。该特定事件不会触发cluetip代码。

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

Answer 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)）是最佳路线。

Answer 3

因为直到第一次点击之后才初始化cluetip。

尝试：

    $("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();
    });

虽然cluetip会多次初始化，但是如何：

    $("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();
    });

Answer 4

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

Answer 5

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

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

jQuery Cluetip直到悬停或点击事件后才会激活

5 个答案: