ASPX WebForm中jQuery $().load()加载页面后回发功能失效问题求助

问题现象 #

• 使用jQuery $().load()将ASPX页面加载到模态框后，清空模态框，原页面所有回发按钮及__postback命令完全失效
• 模态框内加载的页面提交按钮可正常工作，但移除模态框后，所有提交命令仍指向加载页的地址
• 报错信息：

Uncaught TypeError: Cannot set properties of undefined (setting 'value')
at __doPostBack (eval at (jquery-1.10.2.js:612:22), :9:37)

核心原因 #

加载的ASPX页面会自动生成WebForm标准的__doPostBack函数及表单元素，覆盖了原页面的同名函数。新生成的函数中，theForm变量指向的是加载页的form1：

//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>

当模态框被清空，加载页的form1节点被移除，触发回发时，新的__doPostBack找不到theForm下的__EVENTTARGET等元素，导致报错。

解决方案 #

1. 加载时仅提取目标内容（推荐） #

使用jQuery load()方法的选择器参数，只加载目标页面中需要的内容区块，避免引入完整的表单和__doPostBack脚本：

// 只加载目标页面中id为target-content的容器内容
$('#div_modal1').load('cpal?item_id=<%=Request.QueryString("iri")%>&type_id=<%=is1.SelectedValue.ToString%> #target-content', function () { })

注：需要在被加载的ASPX页面中，把需要展示的内容放在一个独立的容器（如<div id="target-content">）中

2. 备份并恢复原页面的__doPostBack #

在加载新页面之前，先备份原页面的__doPostBack函数，清空模态框后恢复：

// 备份原函数
var originalDoPostBack = window.__doPostBack;

// 加载页面
$('#div_modal1').load('cpal?item_id=<%=Request.QueryString("iri")%>&type_id=<%=is1.SelectedValue.ToString%>', function () { })

// 清空模态框时恢复原函数
function clearModal() {
    $('#div_modal1').empty();
    window.__doPostBack = originalDoPostBack;
}

3. 重新定义正确的__doPostBack #

如果备份恢复不方便，可以直接重新定义__doPostBack，确保它指向原页面的form1：

function resetDoPostBack() {
    var theForm = document.forms['form1'] || document.form1;
    window.__doPostBack = function(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
}

// 清空模态框后调用
clearModal();
resetDoPostBack();

4. 过滤加载内容中的脚本 #

通过AJAX手动获取HTML，过滤掉所有<script>标签后再插入模态框，避免加载页的脚本覆盖原页面内容：

$.get('cpal?item_id=<%=Request.QueryString("iri")%>&type_id=<%=is1.SelectedValue.ToString%>', function(html) {
    // 过滤脚本标签，提取目标内容
    var filteredHtml = $(html).find('#target-content').html();
    $('#div_modal1').html(filteredHtml);
});

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