回发后更新面板中的jquery事件处理程序不起作用[重复]

Posted 2023-02-22

【中文标题】回发后更新面板中的jquery事件处理程序不起作用[重复]

【英文标题】：jquery event handler inside updatepanel not working after postback [duplicate]

【发布时间】：2011-06-25 20:48:18

【问题描述】：

我有一个带有“id=ShowDetails”的 div。在我的 javascript 中，我有这个：

    $(document).ready(function () 
       UIactions();
    );

    function UIactions () 
        $('#ShowDetails').click(function () 
            alert("bingo");
          
     );

该 div 位于被回发的更新面板内。当页面加载时，如果我单击 div，我会得到宾果游戏，但在回发之后，我没有。知道为什么吗？

谢谢。

【问题讨论】：

@PTuckley：到目前为止，这个问题的浏览量已超过 20K，因为人们在 Google 上寻找答案并以不同的方式提出问题。

当问题作为重复项关闭时，它们仍会被编入索引以进行搜索，但通过较少的点击将用户重定向到目标问题。目标问题的浏览量为 127K，但其中可能有 20K 是因为他们先到这里而不得不多点击几次的人。

@Flexo：是的，所以重复的价值在于帮助一些人找到他们正在寻找的答案。有些人会使用链接到“最佳”答案的关键字进行搜索，而其他人会使用链接到重复项的关键字进行搜索，然后他们将从那里到达目的地。因此，无需对重复内容投反对票，尤其是当它们有 20K 浏览量时。

【参考方案1】：

我知道这是一篇很老的帖子，但我遇到了一个问题，即更新面板内的内容更新后我的 jQuery 脚本无法工作。

我找到了一个简单的解决方案，所有其他解决方案都不值得一看:)

只需记住将您的 asp.net 控件添加到 UpdatePanel's Triggers 作为回发即可。

<Triggers>
     <asp:PostBackTrigger ControlID="....." />
</Triggers>

希望这对某人有所帮助，因为我花了太多时间来寻找解决方案。

【讨论】：

经过两天的奋斗。非常感谢:)

这在 web.config 中吗？

【参考方案2】：

因为更新面板会重写所有 javascript 处理程序。针对您的情况的解决方案是在每次回发时将您的函数附加到 javascript 事件处理程序。

【参考方案3】：

正如@Artiom 所说，这个问题是因为在更新时，UpdatePanel 会用回发时生成的标记覆盖现有标记，这会抹掉您在 UpdatePanel 中的 html 元素上拥有的任何事件处理程序。

有几种方法可以解决此问题，我在文章Rebinding Client-Side Events After a Partial Page Postback 中对此进行了讨论。最简单的方法 (IMO) 是使用 jQuery 的 live 函数。来自我的文章：

如果您使用 jQuery，就像我在这些示例中所做的那样，还有一种更简单的方法 - live() 函数。 live() 函数为现在或将来的一个或多个 HTML 元素定义事件处理程序。这意味着您可以这样说，“嘿，jQuery，我希望您将此事件处理程序附加到页面上任何<a> 元素的单击事件，无论它现在存在还是将来存在。”因此，如果稍后将<a> 元素动态添加到页面，jQuery 将自动将其单击事件连接到指定的事件处理程序。

有关详细信息以及示例，请参阅文章。