Jquery Tooltip無法在新的ajax附加元素上工作

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);}); 
      } 
     }); 
    }); 
});