jqueryasp.netajax

jQuery not working in .net update panel


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

Solution

  • 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.

    E.g.: Sys.Application.add_load(tooltip);

    Reference link:

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