在asp.net中触发Updatepanel后，Javascript无法正常工作 [英] Javascript not work after firing Updatepanel in asp.net

问题描述

这是我的网站-> www.superim.ir它的模板基础是引导程序，在导航菜单中，我在下面的代码中使用了这些效果！

This is my website -> www.superim.ir Its template base is bootstrap and in nav menu I used below code for some effects!

$('.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将触发，此后菜单效果不起作用！

After firing add to cart button, updatepanel will fire and after this the menu effect does'nt work!

解决方案是什么?

推荐答案

由于使用 UpdatePanel 的部分回发而发生.您订阅控件的 Events 会部分呈现，因此事件会松动.为了克服这种情况，您需要重新绑定控制事件.

This occurs due to the Partial Postback using UpdatePanel. The Events that you subscribe for the controls are rendered partially hence the events looses. To overcome this situation you need to rebind the control events.

这是由常规ASP.Net Ajax和jQuery事件混合导致的常见问题.当您执行部分回发时，会重新创建 DOM并丢失jQuery事件.

This is a common problem caused by mixing the conventional ASP.Net Ajax and jQuery events. When you do the partial postback, the DOM is recreated and the jQuery events are lost.

示例:

<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

Read More about PageRequest Manager on MSDN

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

Here bindEvents() method contains all the script that you need to reload again after Partial Page Postback.

希望这对您有所帮助！

这篇关于在asp.net中触发Updatepanel后，Javascript无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！