새로운 Ajax 추가 요소에서 Jquery 툴팁이 작동하지 않습니다.

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 함수는 페이지 수명 기간 동안 계속해서 실행되지 않습니다. pageload 후 DOM에 대한 변경, 기능의 갱신을 요구하거나 결합하여 살 수 있도록

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

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

Answer 2

기능은, pageload에로드됩니다.

라이브

설명 : 현재와 미래, 현재의 선택과 일치하는 모든 요소에 대한 이벤트에 핸들러를 연결합니다.

---

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