JavaScript가 asp.net의 UpdatePanel을 실행 한 후에 작동하지 않습니다.

Question

이것은 내 웹 사이트 -> www.superim.ir입니다. 템플릿 기반은 부트 스트랩이며 nav 메뉴에서 일부 효과를 위해 아래 코드를 사용했습니다!

$('.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/> 

여기 Read More about PageRequest Manager on MSDN

bindEvents() 방법을 사용하면 부분 페이지 다시 게시 후 다시 재로드하는 데 필요한 모든 스크립트가 포함되어 있습니다.

희망이 도움이됩니다.

Answer 2

나는 똑같은 문제에 직면했다. 나는이 링크에서 도움을 얻었다. Execute JavaScript when an UpdatePanel is updated

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

1. 첫번째 파라미터는 UpdatePanel
2. 두번째 매개 변수는 입력 매개 변수
3. 세번째 파라미터 "시켜라"를이다 스크립트를 식별하는 키이다.
4. 스크립트 자체.
5. 마지막 매개 변수는 ScriptManager가 스크립트 태그에 코드를 래핑할지 여부를 나타내는 플래그입니다.