部分回發和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> 

的Javascript

$(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'); 
} 

基本上我想知道更新面板將如何影響$（文件）。就緒？

由於

Answer 1

內部$(document).ready的代碼將不被再次部分回發調用;如果您需要$(document).ready函數中的某些功能，那麼我建議將這些代碼重構爲一個函數（例如initAll()），並在部分回發後，從服務器端（在您的事件處理程序中）使用ClientScriptManager.RegisterClientScriptBlock函數調用該函數，如：

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

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