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会循环test div。但是在UpdatePanel刷新之后，JQuery不再运行，它导致页面上显示所有test div值。如何解决这个问题？非常感谢你。

Answer 1

有一个简单的答案。

在页面上执行的jquery函数仅加载自身。因此，当Timer勾选时，jquery函数不会再次保持有效。

所以你需要做的是：

在PrintTheSchedule函数中再次调用javascript函数，如

IN 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，因此您必须在每次面板更新时绑定循环功能。
另一种方法是使用jquerys livequery插件 http://docs.jquery.com/Plugins/livequery 并按如下方式修改脚本

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

Answer 3

可能，你需要重新初始化周期。内容会改变

更新面板时，JQuery函数不起作用

3 个答案: