Question

我有这个jQuery工具提示在初始页面加载时工作正常。问题是当我的AJAX附加另一个[tooltipwrapper]块时，工具提示不起作用。请参阅以下代码，我们将非常感谢任何建议！

$(function() {
    $('.tooltipwrapper').each(function () {
        var $tip = $('> .info-block', this);
        var $span = $('> span', this);
        if (!$span.length) {
            var $span = $('> a', this);
        };
        var $old_html = $tip.html();
        var $new_html = '<div class="box-i-l"><div class="box-i-r"><span class="box-i">' + $tip.html() + '</span></div></div>';
        $(this).hover(function () {
            $span.addClass('act');
            $tip.html($new_html);           
            if ($.browser.msie && $.browser.version < 9) {
                $tip.show();
            } else {
                $tip.css('display', 'none');
                $tip.stop().fadeTo(300, 1);}
        }, function () {
            $span.removeClass('act');
            if ($.browser.msie && $.browser.version < 9) {
                $tip.hide();
                $tip.html($old_html);
            } else {
        $tip.css('display', 'block');
                    $tip.stop().fadeTo(50, 0, function() {$tip.css('display', 'none'); $tip.html($old_html);});
            }
        });
    });
});



<div class="tooltipwrapper">
<span class="ico_link #tstatus#"></span>
<div style="opacity: 0; display: none;" class="info-block">
<span class="statusTitle">TASK STATUS</span><br /> 
<a id="1" href="javascript:;" rel="Queue" class="TaskStatusUpdate">Queue</a> 
<a id="1" href="javascript:;" rel="Working" class="TaskStatusUpdate">Working</a> 
<a id="1" href="javascript:;" rel="Completed" class="TaskStatusUpdate">Completed</a
<a id="1" href="javascript:;" rel="Onhold" class="TaskStatusUpdate">On-hold</a>
<a id="1" href="javascript:;" rel="Canceled" class="TaskStatusUpdate">Cancel</a>
</div>

Answer 1

这是因为此代码仅在页面加载时运行。您需要将整个事物放在一个函数中，并在每次附加新节点时调用该函数。 jQuery函数不会在页面的整个生命周期中持续运行。

//so like this
function tooltipMe(){
    //all your code goes here
}

tooltipMe(); // every time you add a new tooltip-able div.

Answer 2

该函数在页面加载时加载，因此在页面加载后更改DOM，需要刷新函数或将其绑定到实时。

<强> LIVE

描述：为现在和将来与当前选择器匹配的所有元素附加一个处理程序。

$(".hoverme").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

所以它会是这样的：

$(function() {
    $('.tooltipwrapper').each(function () {
        var $tip = $('> .info-block', this);
        var $span = $('> span', this);
        if (!$span.length) {
            var $span = $('> a', this);
        };
        var $old_html = $tip.html();
        var $new_html = '<div class="box-i-l"><div class="box-i-r"><span class="box-i">' + $tip.html() + '</span></div></div>';
    $(this).live("mouseover mouseout", function(event) {
          if ( event.type == "mouseover" ) {
            $span.addClass('act');
            $tip.html($new_html);           
            if ($.browser.msie && $.browser.version < 9) {
                $tip.show();
            } else {
                $tip.css('display', 'none');
                $tip.stop().fadeTo(300, 1);}
        }, function () {
            $span.removeClass('act');
            if ($.browser.msie && $.browser.version < 9) {
                $tip.hide();
                $tip.html($old_html);
            } else {
        $tip.css('display', 'block');
                    $tip.stop().fadeTo(50, 0, function() {$tip.css('display', 'none'); $tip.html($old_html);});
            }
        });
    });
});

Jquery Tooltip不适用于新的ajax append元素

2 个答案: