UpdatePanel触发后JavaScript失效问题技术求助

问题原因 #

UpdatePanel的局部刷新机制会替换其ContentTemplate内的DOM元素。你初始在$(document).ready()中绑定的事件，是绑定到页面加载时生成的txtNum元素上的，当局部刷新后，原元素被移除，新生成的元素没有绑定事件，导致脚本停止工作。

解决方案 #

方案1：使用jQuery事件委托

将事件绑定到不会被UpdatePanel替换的父元素（或document）上，利用事件冒泡机制处理新生成元素的事件：

$(document).on('input', '#<%=txtNum.ClientId%>', function () {
    __doPostBack('clean', '<%= updGen.UniqueID %>');  
});

这种方式不需要依赖页面加载或刷新事件，只要元素存在就能触发事件，是最简洁的解决办法。

方案2：监听UpdatePanel的EndRequest事件

在UpdatePanel完成局部刷新后，重新绑定事件：

$(document).ready(function () {
    bindTxtNumInputEvent();
});

// 封装绑定逻辑
function bindTxtNumInputEvent() {
    // 先移除旧绑定，避免重复触发
    $('#<%=txtNum.ClientId%>').off('input').on('input', function () {
        __doPostBack('clean', '<%= updGen.UniqueID %>');  
    });
}

// 监听UpdatePanel刷新结束事件
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    bindTxtNumInputEvent();
});

这种方式适合需要批量处理多个事件绑定的场景，能精准控制刷新后的操作。

方案3：将脚本放入UpdatePanel的ContentTemplate内

把绑定脚本直接放在UpdatePanel的ContentTemplate中，这样每次局部刷新时都会重新执行脚本，给新生成的元素绑定事件：

<asp:UpdatePanel runat="server" ID="updGen">
    <ContentTemplate>
        <script>
            $('#<%=txtNum.ClientId%>').on('input', function () {
                __doPostBack('clean', '<%= updGen.UniqueID %>');  
            });
        </script>
        <div class="col-md-3">
            <label runat="server" id="lblInserimento" class="control-label">Number</label>
            <asp:Panel runat="server" ID="pnlNum" DefaultButton="lnkSearch" CssClass="input-group">
                 <asp:LinkButton title="Search" ID="lnkSearch" OnClick="lnkSearch_Click" CssClass="btn btn-default btn-sm input-group-addon" runat="server"><i class="fa fa-search"></i></asp:LinkButton>
                <asp:TextBox Enabled="false" runat="server" ID="txtNum" CssClass="form-control" oninput="this.value = this.value.replace(/[^0-9]/g, '')"></asp:TextBox>
                <span runat="server" id="spnCodice" class="input-group-btn">
                    <asp:LinkButton ID="btnNumBefor" CssClass="btn btn-flat btn-sm" runat="server" OnClick="btnNumBefor_Click"><i class="fa fa-angle-left"></i></asp:LinkButton>
                    <asp:LinkButton ID="btnbtnNumAfter" CssClass="btn btn-flat btn-sm" runat="server" OnClick="btnbtnNumAfter_Click"><i class="fa fa-angle-right"></i></asp:LinkButton>
                </span>
            </asp:Panel>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

这种方式简单直接，但如果脚本体积较大，会增加每次局部刷新的网络传输量。

内容的提问来源于stack exchange，提问作者gianluca23