0

I am using the following jquery tooltip script on a page with an series of hyperlinks within an update panel:

this.tooltip = function(){      
    xOffset = 50;
    yOffset = 20;       

$("#tools a").hover(function(e){                                              
    this.t = this.title;
    this.title = "";                                      
    $("body").append("<p id='tooltip'>"+ this.t +"</p>");
    $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");        
},
function(){
    this.title = this.t;        
    $("#tooltip").remove();
}); 
$("#tools a").mousemove(function(e){
    $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});         
};


$(document).ready(function(){tooltip();});

It works fine on initial load but not when an ajax call has been made. I believe I should be using .on instead of .ready but I'm unsure how to apply as the following is not working:

$(document).on(function(){tooltip();});
Andrei
  • 42,814
  • 35
  • 154
  • 218
Bobney
  • 320
  • 3
  • 19

1 Answers1

1

There are a couple of ways to fix this. IMO the easiest solution for this problem is to use Sys.Application inside UpdatePanel to call JavaScript, jQuery functions after each Asynchronous post back event.

Refer link:

http://www.codeproject.com/Articles/534587/ASP-NET-jQuery-is-not-Working-in-UpdatePanels

Monika
  • 2,172
  • 15
  • 24