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()，以便事件处理程序不会受到页面内容定期更改的影响。

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+