Updatepanel Breaks jQuery Script

Question

This is a simplified version of what I want to do. Basically I have a datalist with a bunch of things in it, and when you hover over the datalist, I want jquery to hide / show stuff. The problem is that after I bind to the data, my jQuery gridview / repeatater / datalist will exit if gridview / replater / datalist is in the update panel.

After you click the button in the example below, jQuery, which makes the scroll appear when you hover over it.

Any ideas why this is happening, how to fix it or the best way to do it?

<script type="text/javascript"> $(document).ready(function() { $('.comment-div').mouseenter(function() { jQuery("span[class=mouse-hide]", this).fadeIn(50); }); $('.comment-div').mouseleave(function() { jQuery("span[class=mouse-hide]", this).fadeOut(50); }); }); </script> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div class="comment-div"> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> <span class="mouse-hide" style="display: none;">sdfgsdfgsdfgsdfg</span> </div> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel> 

And the code:

  protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { BindStuff(); } } public void BindStuff() { TestDB db = new TestDB(); var x = from p in db.TestFiles select new { p.filename}; x = x.Take(20); GridView1.DataSource = x; GridView1.DataBind(); } protected void Button1_Click(object sender, EventArgs e) { BindStuff(); } 

Answer 1

The reason this happens is because the controls are recreated in partial postback. Use the jQuery live function to rewrite the code as follows:

 $(document).ready(function() { $('.comment-div').live('mouseenter',function() { jQuery("span[class=mouse-hide]", this).fadeIn(50); }); $('.comment-div').live('mouseleave', function() { jQuery("span[class=mouse-hide]", this).fadeOut(50); }); }); 

Answer 2

When the UpdatePanel is updated, it completely replaces all the DOM elements to which you previously attached event handlers. The simplest fix is ​​to initialize event handlers in pageLoad () instead of $ (document) .ready () . Its code will be executed both during the initial loading of the page, and after updating the UpdatePanel.

The best solution is to change your code to use live () or delegate () , so that event handlers are not affected by periodic changes to page content.

Answer 3

When you perform an AJAX postback using the update panel, the DOM inside it is deleted and recreated when an AJAX response arrives. The handlers you connected are lost if you do not use the live or livequery method

Answer 4

See below for different versions of jQuery:

 $( selector ).live( events, data, handler ); // jQuery 1.3+ $( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+ $( document ).on( events, selector, data, handler ); // jQuery 1.7+