ASP.NET UpdatePanel 導致 jQuery 事件失效的解決方案：PageRequestManager.endRequest 重新繫結

問題根因

UpdatePanel 部分更新時，**僅替換內容區域的 HTML**，原本透過 $(document).ready() 綁定的事件處理器**不會自動重新綁定**到新產生的 DOM 元素上，導致事件失效。

標準解法：Sys.WebForms.PageRequestManager

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    // 每次非同步回傳結束後重新綁定
    $(document).ready(function () {
        // --- 你的原始綁定邏輯 ---
        var $span = $("input[id*='txtSpan']");
        $span.off('focusout').on('focusout', function () {
            var isZero = $(this).val() == "0";
            $("#spRule").toggle(isZero);
            $("input[id*='btnSave']").prop("disabled", isZero);
        });
        // --- 結束 ---
    });
});
</script>

關鍵點

• prm.add_endRequest：每次 UpdatePanel 更新完成觸發。
• 使用 .off().on() 避免重複綁定導致事件觸發多次。
• 選擇器 id*='txtSpan' 針對 ClientID 模式（如 ctl00_Content_txtSpan）依然有效。

進階：僅針對更新區域重新綁定（效能更好）

prm.add_endRequest(function (sender, args) {
    var panels = args.get_panelsUpdated(); // 取得更新的 UpdatePanel 陣列
    panels.forEach(function (panel) {
        var $panel = $("#" + panel.id);
        // 僅在更新區域內尋找並綁定
        $panel.find("input[id*='txtSpan']").off('focusout').on('focusout', handler);
    });
});

替代方案：事件委派

// 全域委派，無需重新綁定
$(document).on('focusout', "input[id*='txtSpan']", function () {
    var isZero = $(this).val() == "0";
    $("#spRule").toggle(isZero);
    $("input[id*='btnSave']").prop("disabled", isZero);
});

**優點**：一次綁定、永久有效、支援動態新增元素。
**缺點**：事件冒泡至 document，極高頻事件可能有微小效能影響；若頁面結構複雜需注意選擇器精確度。

總結建議

1. **首選事件委派**（$(document).on(...)），最簡潔且無副作用。
2. 若必須在特定區域綁定，使用 endRequest + panelsUpdated 精準重新綁定。
3. 避免在 endRequest 中再次包裹 $(document).ready()，直接執行綁定邏輯即可。