如何从 UpdatePanel 回调调用 javascript 函数(正文变化)?

Question

我通过注入JavaScript函数来更新div。我正在使用UpdatePanel。 问题是这个JS函数的主体发生了变化。每次用户单击按钮时，新的JS函数(函数名称始终相同(都会放入相同的div中，但主体不同。函数体内容变化的原因是新数据。

对我来说的结果是，当我调用这个函数时，我总是执行那个div 中的第一个函数。div 的内容发生了变化 - 我已经检查过了。

我试过：

1. Sys.Application.add_load(GetMyChart(
2. pageRequestManager.add_endRequest(EndRequestHandler(
3. ScriptManager.RegisterStartupScript
4. Page.ClientScript.RegisterStartupScript
5. Page.ClientScript.RegisterClientScriptBlock

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="chart1" runat="server" >
<script type="text/javascript">
function GetMyChart() { alert("wow!"); }
</script>
</div>
<asp:Label ID="Label1" runat="server" Text="old text"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script type="text/javascript">
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
pageRequestManager.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
GetMyChart(); 
}
</script>

protected void Button1_Click(object sender, EventArgs e)
{
chart1.InnerHtml = GetChartFunction();
}

在这里介绍的代码中，我总是得到警报。 我的目标是调用GetMyChart函数，该函数将由GetChartFunction((返回，我需要在更新后调用它。

Answer 1

上面的代码不起作用，因为您返回了<script type="text/javascript"> function XYZ() { //changing_body } XYZ();</script>字符串并将其分配给chart1div的内部HTML，这并不意味着它将使用函数覆盖创建新的<script>标记。

简而言之，返回值被视为普通的字符串，并且不是向 DOM 树添加新元素的正确方法。

此外，我能够在不使用 .Net 的情况下在原生 JavaScript 中重现它，下面是示例： https://jsfiddle.net/qt1v6mof/

为了获得预期的效果，您绝对应该使用文档的 createElement 函数来创建真正的<script>标签元素，然后使用 appendChild 替换当前div 的innerHTML内容，如下面的代码和示例所示：

<div id="chart">
<script type="text/javascript">
var getMyChart = function() { alert("wow!"); }
</script>
</div>
<button id="changeBtn">Change getMyChart's body</button>
<button id="callEndRequest">Call endRequestHandler</button>

function change() {
var newScript = document.createElement('script'),
chartElem = document.getElementById('chart')
chartElem.innerHTML = ''
newScript.setAttribute('type', 'text/javascript');
newScript.innerHTML = 'getMyChart = function() { alert("new body");}'
chartElem.appendChild(newScript)
}
function endRequestHandler () {
getMyChart()
}
changeBtn.onclick = change
callEndRequest.onclick = endRequestHandler
getMyChart()

现场示例：https://jsfiddle.net/9mdeoLb2/

希望会有所帮助 你。 亲切问候！