在ASP.NET中触发UpdatePanel后，Javascript无法工作

Question

我的网站模板基于Bootstrap，导航菜单中，我使用以下代码实现了一些效果！

$('.productbar .dropdown').on('show.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).fadeIn(300);
        $(this).find('.dropdown-menu').first().stop(true, true).animate({ top: "45px" }, 300);
    });

    $('.productbar .dropdown').on('hide.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).fadeOut(300);
        $(this).find('.dropdown-menu').first().stop(true, true).animate({ top: "55px" }, 300);
        $(this).find('.sub-menu').hide();
        $(this).find('.left-caret').addClass("right-caret").removeClass("left-caret");
    });

在触发动作按钮后，UpdatePanel 会被触发，此后菜单效果将不起作用！

解决方法是什么？

- 0xSamman

---

那么问题是什么？请明确说明。数据不足且不清楚 :( - SHEKHAR SHETE

抱歉，我的朋友，帖子已经编辑过了 :) - 0xSamman

Answer 1

这是由于使用 UpdatePanel 的 Partial Postback 导致的。您为控件订阅的 Events 会被部分渲染，因此事件会丢失。为了解决这种情况，您需要重新绑定控件事件。

这是将传统的 ASP.Net Ajax 与 jQuery 事件混合使用所造成的常见问题。当进行部分 postback 时，DOM 将被重新创建并且 jQuery 事件将丢失。

示例：

<script type="text/javscript">
    // bind the events (jQuery way)
        $(document).ready(function() {
            bindEvents();   
        });
    
        // attach the event binding function to every partial update
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(evt, args) {
            bindEvents();
        });
<script/>

在MSDN上阅读有关PageRequest Manager的更多信息

这里的bindEvents()方法包含了所有需要在部分页面回发后重新加载的脚本。

希望这可以帮到你！

- SHEKHAR SHETE

Answer 2

我也遇到了同样的问题。我从这个链接得到了帮助：在UpdatePanel更新时执行JavaScript

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(
                        upPanel,
                        this.GetType(),
                        "MyAction",
                        "doMyAction();",
                        true);
}

1. 第一个参数是UpdatePanel。
2. 第二个参数是类型参数。
3. 第三个参数“MyAction”是用于标识脚本的关键字。
4. 脚本本身。
5. 最后一个参数是一个标志，用于指示ScriptManager是否应该在您的代码中包装脚本标记。

- Kamran

---

感谢您和原博客作者Adam Pope先生的贡献。 - Firas Shrourou

我不知道为什么它被写在Page_Load函数里，它可以是任何函数，只要调用该函数就会触发所述脚本。在我的情况下，我需要显示一个toast，这是我的更新代码：private void DisplayMessagePanel(string message = "") { ScriptManager.RegisterStartupScript( SCPanel, this.GetType(), "ShowSuccessMessage", "ShowSuccessMessage('" + message.Replace(''', ' ') + "');", true); } - Sajid2405

Answer 3

如果上述方法不起作用，这将在任何回发（部分或全部）中重新加载事件。

将整个jQuery DOM准备就绪的事件函数包装在以下内容中：

function pageLoad() {

    $(document).ready(function () {
        
        //jquery code and events, event binding.. etc..

    }); }

如果您有许多asp:update面板，这将非常有帮助。

- moto_geek