UpdatePanel破坏了JQuery脚本

Question

这是我想做的事情的简化版。基本上，我有一个数据列表，里面有很多东西，当你在数据列表中鼠标悬停在某个项目上时，我希望jquery隐藏/显示一些东西。问题在于，如果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();
    }

- Jason

Answer 1

这种情况发生的原因是控件在部分回发时被重新创建。使用jQuery的“live”功能，重写您的代码如下：

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

- Marko

Answer 2

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

更好的解决方案是更改您的代码以使用live()或delegate()，以使事件处理程序不受页面内容定期更改的影响。

- Dave Ward

---

+1 - 你比我先完成了。而且，我之前不知道 pageLoad() 函数的问题。非常棒。 - Ryan Kinal

在pageLoad()中连接事件时，无论是使用jQuery还是ASP.NET AJAX的$addHandler，都要小心，因为可能会将多个相同事件连接到同一个元素。 - Marko

但是你可以在分配每个事件之前使用$(element).unbind()来确保它不会被添加两次。 - Marko

Answer 3

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

- Claudio Redi

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+

- user3656029

---

如何处理第三个选项的 each？ - Si8