异步回发后jquery不起作用

Question

我正在使用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>

- Nikhil D

---

如果我没记错的话，异步回发不会触发jQuery的ready事件。 - Sergio Rosas

Answer 1

asp:UpdatePanel 会用服务器返回的结果替换内容。这意味着所有之前挂钩的事件在 post back 后将不再起作用。

请改用 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中的事件钩子，都要做同样的处理。

- Codesleuth

---

我已经更新了一个例子。这样说得通吗？如果您希望我进一步扩展，请告诉我。 - Codesleuth

.live()函数已经被弃用数月，不应再使用。如果您正在使用1.7.x+版本，请使用.on()；否则请使用.delegate()。如果您使用的jQuery版本太旧，没有.delegate()函数，建议升级。 - Anthony Grist

@AnthonyGrist 很好的意见 - 我会更新示例。我担心 .on() 会让 OP 感到困惑，但如果我将整个内容都打出来，希望它能够有意义。 - Codesleuth

我想补充一点，即使使用了钩子，它也不起作用。在异步回发之后，jQuery无法工作。 - sameer

Answer 2

您需要添加ajax endRequest事件处理程序，该事件由Toolkit提供。在这里了解更多信息。

在页面加载时添加JavaScript块。

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

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

- Adil

---

在endRequestHandle(sender, Args)中，我应该使用document.ready函数吗？ - Nikhil D

如果您在endRequestHandle中没有获得绑定，则可以创建一个函数进行初始化，如绑定等，并从$(document).ready和endRequestHandle两处调用。 - Adil