异步回发后jquery无法正常工作

时间:2012-07-03 10:29:32

标签: c# jquery asp.net updatepanel

我正在使用updatepanel进行异步回发。在异步回发之后jQuery功能无法正常工作。我正在使用jQuery将一些mousedown mouseenter效果连接到UpdatePanel内部的html表格单元格。事件绑定在$(document).ready

     <script type="text/javascript">

                $(function ()



     {
    $(".csstablelisttd").mousedown(function (e)
                        {
    //mouse down code
    });
 $(".csstablelisttd").mouseenter(function (e)
                        {
    //mouse entercode
    });
                        $("#contentPlaceHolderMain_btnFix").click(function (e)
                        {alert("Alert");//here alert is generate two times an then postback occurs
                           //btn click code
                        }
                    }

            </script>

    <asp:UpdatePanel ID="updatePanelTableAppointment" runat="server">
                            <ContentTemplate>
         <table id="table" runat="server">
             //table data
            </table>

                        </ContentTemplate><Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnFix" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>

2 个答案:

答案 0 :(得分:4)

asp:UpdatePanel将内容替换为从服务器返回的结果。这意味着所有被钩住的事件以前在回发后都不起作用。

改为使用jQuery.on()

例如:

<script type="text/javascript">
$(function () {

    $("#table").on("mousedown mouseenter", ".csstablelisttd", function (e) {
        //mouse down AND mouse enter code
    });

    $("#contentPlaceHolderMain_btnFix").on("click", function (e) {
        alert("Alert");//here alert is generate two times an then postback occurs
        //btn click code
    });
});
</script>

注意:如果您的鼠标按下并且鼠标输入代码不同,请将它们拆分。

UpdatePanel中包含的每个事件挂钩执行相同的操作。

答案 1 :(得分:2)

您必须为Toolkit提供的ajax endRequest添加事件处理程序。阅读更多here

添加在页面加载时执行的Javascript块。

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);

function endRequestHandle(sender, Args)
{
     alert("After ajax call");
}