javascript - Jquery 工具提示不适用于新的 ajax 追加元素

Question

我有这个 jQuery 工具提示，它在初始页面加载时运行良好。问题是当我使用 AJAX 附加另一个 [tooltipwrapper] block 时，工具提示不起作用。请参阅下面的代码，任何建议将不胜感激!

$(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.