【问题标题】:jquery not working after async postbackjquery在异步回发后不起作用
【发布时间】:2012-07-03 18:33:15
【问题描述】:

我正在使用更新面板进行异步回发。在异步回发 jQuery 功能不起作用之后。我正在使用 jQuery 对 UpdatePanel 内的 html 表格单元格连接一些 mousedown mouseenter 效果。事件绑定在 $(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>

【问题讨论】:

  • 如果我没记错的话,异步回发不会触发 jQuery 的就绪事件

标签: c# jquery asp.net updatepanel


【解决方案1】:

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 中的每个事件挂钩执行相同操作。

【讨论】:

  • 我已经更新了一个例子。是否有意义?如果您希望我进一步扩展,请告诉我。
  • .live() 函数已被弃用数月,不应使用。如果您使用的是 1.7.x+,请使用 .on(),否则使用 .delegate()。如果您使用的 jQuery 版本太旧,它没有 .delegate(),更新可能是个好主意。
  • @AnthonyGrist 好点——我会更新这个例子。根据我更新的示例,我担心.on() 可能会混淆 OP,但我希望如果我只是输入整个内容,这将是有意义的。
  • 我想补充一点,即使使用钩子,它也不起作用。 jquery 在异步回发后不起作用
【解决方案2】:

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

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

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

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

【讨论】:

  • 在 endRequestHandle(sender, Args) 我用什么 document.ready 函数或者什么
  • 如果您没有在 endRequestHandle 中获得绑定,则创建一个函数来执行初始化(如绑定等)并从 $(document).ready 和 endRequestHandle 调用
最近更新 更多