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元素。最简单的解决方法是initialize your event handlers in pageLoad() instead of $(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+

UpdatePanel打破了JQuery脚本

4 个答案: