UpdatePanel打破了JQuery脚本

Question

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

单击下面示例中的按钮后,当鼠标停止工作时,显示跨度的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();
    }

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

Answer 2

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

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