jquery - 部分回发和 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');
}

基本上我想知道更新面板将如何影响$(document).ready？

谢谢

Answer 1

部分回发不会再次调用$(document).ready内的代码；如果您需要 $(document).ready 函数中的某些功能，那么我建议将这些代码重构为函数(例如 initAll())并在部分回发后，从服务器端(在事件处理程序中)使用 ClientScriptManager.RegisterClientScriptBlock 函数来调用该函数，例如:

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

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