在 asp.net 中触发 Updatepanel 后 Javascript 不起作用答案

【问题标题】：Javascript not work after firing Updatepanel in asp.net在 asp.net 中触发 Updatepanel 后 Javascript 不起作用
【发布时间】：2014-08-03 20:06:28
【问题描述】：

我的网站模板是基于 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 将触发，之后菜单效果不起作用！

解决办法是什么？

【问题讨论】：

那么问题是什么？请说明清楚。数据不足和不清楚:(
对不起我的朋友，帖子已编辑:)

标签： javascript asp.net twitter-bootstrap-3 updatepanel

【解决方案1】：

这是因为Partial Postback 使用UpdatePanel。您订阅控件的Events 部分呈现，因此事件丢失。要克服这种情况，您需要重新绑定控件事件。

这是由于混合了传统的 ASP.Net Ajax 和 jQuery 事件而导致的常见问题。当您执行部分回发时，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/>

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

希望对您有所帮助！

【讨论】：

【解决方案2】：

我遇到了同样的问题。我从这个链接得到了帮助。 Execute JavaScript when an UpdatePanel is updated

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

第一个参数是UpdatePanel
第二个参数是类型参数
第三个参数“MyAction”是识别脚本的关键。
脚本本身。
最后一个参数是一个标志，指示 ScriptManager 是否应该将您的代码包装在脚本标签中。

【讨论】：

感谢您和撰写原始博客的 Adam Pope 先生

【解决方案3】：

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

将整个 jquery DOM 就绪事件函数包装在以下内容中：

function pageLoad() {

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

    }); }

如果您有许多 asp:update 面板，这会很有帮助..

【讨论】：