在asp.net中启动Updatepanel后,Javascript无法正常工作

Question

这是我的网站 - > www.superim.ir它的模板基础是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");
    });

点击后添加到购物车按钮,更新面板将启动,此后菜单效果不起作用!

解决办法是什么？

Answer 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/>

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

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

希望这对你有所帮助!

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 是否应该将您的代码包装在脚本标签中。