jquery - ティッカーがパネルを更新している間、JQuery関数は機能しません

Question

ティッカーがパネルを更新しているときにJQuery関数が機能しないのはなぜですか？以下のコードをご覧ください。

<asp:Timer ID="Schedule_Timer" runat="server" Interval="10000"></asp:Timer>    
<asp:UpdatePanel ID="Schedule_UpdatePanel" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Schedule_Timer" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
        <asp:Panel ID="Schedule_Panel" runat="server" Height="250px"  Width="250px">
            <asp:Literal ID="Schedule_Label" runat="server" Text=""></asp:Literal>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

<script>
    $('#test').cycle({
        fx: 'scrollUp',
        timeout: 6000,
        delay: -2000
    });
</script>

はSchedule_Label、コードビハインドを介して入力されます。

Protected Sub Schedule_Timer_Tick(sender As Object, e As System.EventArgs) Handles Schedule_Timer.Tick
    PrintTheSchedule()
End Sub

Private Sub PrintTheSchedule()
    //This is just for example, the actual data is taken from gridview based on the realtime
    Schedule_Label.Text = "<div id='test'>" & _
                "<div>test 1</div>" & _
                "<div>test 2</div>" & _
                "<div>test 3</div>" & _
                "<div>"        
End Sub

最初の10秒間、JQueryはtestdivを循環させます。しかし、UpdatePanelが更新された後、JQueryは実行されなくなり、すべてのtestdiv値がページに表示されました。この問題を解決するにはどうすればよいですか？どうもありがとうございます。

Answer 1

かわいらしい簡単な答えがあります。

ページで実行されるjquery関数は、それ自体のみをロードします。したがって、タイマーがチェックされると、jquery関数は再び有効なままになりません。

したがって、あなたがする必要があるのは：

PrintTheSchedule関数で、次のようにjavascript関数を再度呼び出します。

C＃では私はこれを次のように行います

ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "runScript", "RunScriptAgain();", true);

そして、Aspxページで

<script>

 function RunScriptAgain() 
 {
  $('#test').cycle({
    fx: 'scrollUp',
    timeout: 6000,
    delay: -2000
   });
 }

//初めて必要

$(document).ready(function() {  RunScriptAgain(); })

Answer 2

更新パネルが更新された後..その後、idテストの古いdivが破棄されるため、パネルの更新ごとにサイクル関数をバインドする必要があります。
これを行うもう1つの方法は、jquerys livequeryプラグイン http://docs.jquery.com/Plugins/livequeryを使用 して、次のようにスクリプトを変更することです。

$('#test').livequery(function(){
$(this).cycle({
        fx: 'scrollUp',
        timeout: 6000,
        delay: -2000
    });
});

Answer 3

おそらく、サイクルbecを再初期化する必要があります。内容が変わる