更新面板阻止 jquery 工作？答案

【问题标题】：Update panel prevents jquery from working?更新面板阻止 jquery 工作？
【发布时间】：2013-09-26 15:55:43
【问题描述】：

我在页面上有这个脚本

<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() 有关，但当然这不会在更新时运行，因为整个页面都没有加载，我能在这里做什么？

【问题讨论】：

标签： c# javascript jquery webforms

【解决方案1】：

您还需要在更新面板更新以及页面加载时触发 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>

【讨论】：

【解决方案2】：

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

【讨论】：