UpdatePanel 中断 JQuery 脚本答案

【问题标题】：UpdatePanel Breaks JQuery ScriptUpdatePanel 中断 JQuery 脚本
【发布时间】：2011-03-13 01:32:51
【问题描述】：

这是我想做的简化版本。基本上我有一个数据列表，里面有一堆东西，当你将鼠标悬停在数据列表中的项目上时，我希望 jquery 隐藏/显示东西。问题是，在我对 gridview/repeater/datalist 进行数据绑定后，如果 gridview/repeater/datalist 在更新面板中，jquery 将退出工作。

单击下面示例中的按钮后，当您将鼠标悬停在停止工作时，生成 span 的 jquery 会显示出来。

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

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

还有代码隐藏：

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

【问题讨论】：

标签： c# asp.net jquery ajax updatepanel

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

当 UpdatePanel 刷新时，它会完全替换您之前附加事件处理程序的所有 DOM 元素。最简单的解决方法是initialize your event handlers in pageLoad() instead of $(document).ready()。它的代码将在初始页面加载时执行，也将在每次 UpdatePanel 刷新后执行。

更好的解决方案是将您的代码更改为使用live() 或delegate()，这样事件处理程序就不会受到页面内容的周期性变化的影响。

【讨论】：

+1 - 你打败了我。另外，我不知道 pageLoad() 的怪癖。很酷。
在 pageLoad() 中连接事件时必须小心，无论是使用 jQuery 还是 ASP.NET AJAX 的 $addHandler，因为可以将同一事件的多个副本连接到同一个元素。
但是您可以在分配每个事件之前使用 $(element).unbind() 以确保它不会被添加两次。
谢谢 - 这就是我要尝试的。

【解决方案3】：

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

【讨论】：

【解决方案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+

【讨论】：

第三个选项如何处理each？