부분적인 포스트 백과 jquery

Question

일부 포스트 백에서 일부 jquery가 작동을 멈추는 문제가 발생했습니다. 두 개의 라디오 버튼이있는 페이지가 있는데 하나는 데이터를 표시하고 다른 하나는 이미지 갤러리를 표시합니다. jquery를 사용하여 하나 또는 다른 것을 표시하거나 숨 깁니다.

또한 업데이트 패널 내부에 모달 팝업 익스텐더가 있습니다. mpe를 닫고 이미지 갤러리로 다시 전환하면 일부 코드가 작동을 멈 춥니 다. 기본적으로 갤러리는 일정 간격으로 이미지를 전환합니다. 또한 동일한 작업 (간격으로 전환)과 작동하지 않는 축소판이있는 축소판이 있습니다.

HTML을

<%@ Register Src="~/User_Controls/modify_image_table.ascx" TagName="IMG" TagPrefix="uc2" %> 
<%@ Register Src="~/User_Controls/ImageLoaderUC.ascx" TagName="ImageLoader" TagPrefix="uc8" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="PageContent" runat="server"> 
<asp:UpdatePanel ChildrenAsTriggers="true" ID="Upd1" runat="server"> 
    <ContentTemplate> 

     <div class="radioSelection"> 
      <asp:RadioButtonList ID="selectionby" runat="server" Font-Bold="true" RepeatDirection="Horizontal" 
       RepeatColumns="2" CssClass="bodycopy"> 
       <asp:ListItem Text="Image Library" Selected="True" Value="Libr"></asp:ListItem> 
       <asp:ListItem Text="Image Loader" Value="Load"></asp:ListItem> 
      </asp:RadioButtonList> 
     </div> 
     <div id="mpe" style="width: 600px; padding: 5px;"> 
      <uc2:IMG ID="IMG1" cssclass="bodycopy" runat="server" /> 
     </div> 
     <div id="imgLoader"> 
      <uc8:ImageLoader ID="ImageLoader" runat="server" /> 
     </div> 
     <asp:UpdateProgress ID="upp1" runat="server" AssociatedUpdatePanelID="Upd1"> 
      <ProgressTemplate> 
       <div id="progressBackgroundFilter"> 
       </div> 
       <div id="modalPopup"> 
        &nbsp; &nbsp; Loading... 
        <img align="middle" src="../images/Ajax/loading_1.gif" /> 
       </div> 
      </ProgressTemplate> 
     </asp:UpdateProgress> 
    </ContentTemplate> 
</asp:UpdatePanel> 

자바 스크립트

$(document).ready(function (e) { 
    // Execute the slideShow 
    slideShow(6000); 
    thumbInt(); // Assign int to thumbnail list items 
    clearShowClass(); // Prevents multiple li having .show 

    function clearShowClass() { 
     setTimeout(timedInterval, 1000); 
    }; 

    function timedInterval() { 
     $('ul.slideshow li').not('.show').css("opacity", 0); 
     clearShowClass(); 
    } 

    $('#footer img').mouseover(

function() { 
    $(this).animate({ 
     opacity: 3.7 
    }) 
}); 

    $('#footer img').mouseout(
    function() { 

     $(this).animate({ 
      opacity: 0.7 
     }) 
    }); 

    function thumbInt() { 
     for (i = 1; i <= $('ul.slideshow li').length; i++) { 
      $('#footer .thumbnail' + i).bind('click', { iteration: i }, function (event) { 
       $('ul.slideshow li').removeClass('show').css("opacity", 0).add($('ul.slideshow li:nth-child(' + event.data.iteration + ')').addClass('show').css("opacity", 0.0).animate({ 
        opacity: 1.0 
       }, 1000)); 

       $('#footer li').removeClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ')').addClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ') img'))); 

      }); 
     }; 
    }; 
}); 


function slideShow(speed) { 

    //Set the opacity of all images to 0 
    $('ul.slideshow li').css({ 
     opacity: 0.0 
    }); 

    //Get the first image and display it (set it to full opacity) 
    $('ul.slideshow li:first').css({ 
     opacity: 1.0 
    }).addClass('show'); 


    //Get the first thumbnail and change css 
    $('#footer li:first').css({ 
     opacity: 1.0 
    }).addClass('highlight'); 


    //Call the gallery function to run the slideshow 
    var timer = setInterval('gallery()', speed); 

    //Pause the slideshow on mouse over content 
    $('#footer, ul.slideshow').hover(

function() { 
    clearInterval(timer); 
}, 

function() { 
    timer = setInterval('gallery()', speed); 
}); 
} 

function gallery() { 
    //if no IMGs have the show class, grab the first image 
    var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li.first')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first')); 


    //Set the fade in effect for the next image, show class has higher z-index 
    next.css({ 
     opacity: 4.0 
    }).addClass('show').animate({ 
     opacity: 4.0 
    }, 1000); 

    // Hide the current image 
    current.animate({ 
     opacity: 0.0 
    }, 1000).removeClass('show'); 

    //if no thumbnails have the highlight class, grab the first thumbnail 
    var currentThumb = ($('#footer li.highlight') ? $('#footer li.highlight') : $('#footer li:first')); 

    var nextThumb = ($('#footer li:last').hasClass('highlight')) ? $('#footer li:nth-child(1)') : $('#footer li.highlight').next($('#footer li')); 


    nextThumb.addClass('highlight'); 
    currentThumb.removeClass('highlight'); 
} 

는 기본적으로 나는 업데이트 패널이 $ (문서)에 영향을 얼마나 알고 싶어 .ready?

감사

Answer 1

$(document).ready 내부의 코드가 부분적으로 다시 게시 다시 호출되지 않습니다

; $(document).ready 함수의 일부 기능이 필요하다면 해당 코드를 함수 (예 : initAll())로 리팩터링하고 부분 포스트 백 이후에 (이벤트 핸들러의) 서버 측에서 함수를 사용하여 다음과 같은 함수를 호출하십시오.

... 
// last line in your partial postback handler 

ScriptManager.RegisterClientScriptBlock(Upd1,typeof(UpdatePanel),"__updp__", "initAll();", true);