更新面板阻止 jquery 工作

Update panel prevents jquery from working?

本文关键字：jquery 工作 更新      更新时间：2023-09-26

我在页面上有这个脚本

<script type="text/javascript">
        $(document).ready(function () {
            var btnApplyVoucher = document.getElementById('LbtnApplyVoucher');
            var voucher = document.getElementById('TxtVoucher');
            $("input.voucherCode").bind('keyup paste', function () {
                btnApplyVoucher.setAttribute("class", "displayBlack");
            });
            $("input.voucherCode").bind('blur', function () {
                if (voucher.value == '') {
                    btnApplyVoucher.removeAttribute("class", "displayBlack");
                }
            });
        });
</script>

我有这个文本框，它正在由上面的jquery操作

<asp:UpdatePanel ID="UpdBasket" runat="server">
...
<asp:TextBox ID="TxtVoucher" Text="" runat="server" CssClass="voucherCode" ClientIDMode="Static"/>
...
<asp:LinkButton ID="LbtnUpdateBasket" runat="server" Text="Update Basket" OnClick="LbtnUpdateBasket_Click"/></div>
...
</asp:UpdatePanel>

我的问题是当单击LbtnUpdateBasket并且更新面板更新我的jquery停止运行时？！我不确定我能在这里做什么，我在网上找不到的东西对我真的有帮助吗？我相信我的问题与页面加载时正在运行的.ready()有关，但当然这不会在更新中运行，因为整个页面无法加载，我能在这里做什么？

您还需要在更新面板更新以及页面加载时触发 jQuery。

例如：

    <script type="text/javascript">
        //Get page request manager
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        //Add handler for end request (update panel, end update)
        prm.add_endRequest(configurePage);
        $(document).ready(configurePage);
        function configurePage() {
            var btnApplyVoucher = document.getElementById('LbtnApplyVoucher');
            var voucher = document.getElementById('TxtVoucher');
            $("input.voucherCode").bind('keyup paste', function () {
                btnApplyVoucher.setAttribute("class", "displayBlack");
            });
            $("input.voucherCode").bind('blur', function () {
                if (voucher.value == '') {
                    btnApplyVoucher.removeAttribute("class", "displayBlack");
                }
            });
        }
</script>

单击按钮时，将发送 AJAX 请求，然后根据该请求的结果重新创建UpdatePanel的整个 HTML 内容。 然后，您的 JQuery 代码所做的所有更改都需要重新应用。 您需要确保在触发链接按钮的单击处理程序的任何内容中运行用于重新应用这些 JQuery 绑定的相应代码。

相关文章：