Question

我在页面上有这个脚本

<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()有关，但是当整个页面加载时，这不会在更新上运行，我该怎么办？

Answer 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>

Answer 2

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

更新面板阻止jquery工作？

2 个答案: