UpdatePanel打破了JQuery脚本

这是我想要做的简化版本。 基本上我有一个带有大量内容的数据列表，当你将数据库中的项目鼠标hover时，我希望jquery隐藏/显示内容。 问题是，在我数据绑定后，如果gridview / repeater / datalist在更新面板中，我的gridview / repeater / datalist jquery退出工作。

单击下面示例中的按钮后，当鼠标滑过时，显示跨度的jquery将退出工作状态。

任何关于为什么会发生这种情况的想法，如何解决它或更好的方法来做到这一点？

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

代码隐藏：

  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

发生这种情况的原因是因为控件在部分回发上重新创建。 使用jQuery的“实时”function，所以重写你的代码，如：

 $(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

当UpdatePanel刷新时，它会完全替换您之前附加事件处理程序的所有DOM元素。 最简单的解决方法是在pageLoad（）中初始化事件处理程序而不是$（document）.ready（） 。 它的代码将在初始页面加载时执行，但也会在每次UpdatePanel刷新后执行。

更好的解决方案是将代码更改为使用live（）或delegate（） ，以便事件处理程序不会受到页面内容的定期更改的影响。

Answer 3

当您使用更新面板执行AJAX回发时，其中的DOM将被删除并在AJAX响应到达时重新创建。 除非您使用live方法或livequery库，否则您附加的处理程序将丢失

Answer 4

请参阅下面的不同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+