我有一些 Javascript 在第一次加载时工作正常，但在回发时不起作用。 经过一番阅读后，我似乎需要删除 EventListener 并重新绑定它们。 所以我有以下代码。 首次加载时，触发的警报为：
我在文本框中输入内容，计数器按预期倒计时。 我单击一个触发回发的按钮。 之后，我的警报是：
计数器完全停止工作。 这不是更新面板内的内容。 我的假设是删除 EventListeners，然后通过再次运行 PageLoadStuff 函数将它们添加回来，但我什至不确定这是否正确。
编辑：在“isPostback”代码块中，如果我注释掉除 PageLoadStuff() 之外的所有内容，则“PageLoadStuff Complete”警报永远不会出现，所以我假设它在 addEventListener 上消失了。 这是我的脚本：
<script type="text/javascript">
function PageLoadStuff() {
alert("PageLoadStuff Start");
const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
const label1 = document.getElementById('Label_Answer_Char_Count');
const label2 = document.getElementById('Label_Answer_Char_Count2');
const labelRemaining1 = document.getElementById('Label_Answer_Char_Remaining');
const labelRemaining2 = document.getElementById('Label_Answer_Char_Remaining2');
alert("PageLoadStuff Vars");
// Add input event listener for text area
textArea2.addEventListener('input', IncrementCounters);
function IncrementCounters() {
textCounter(textArea2, 3000, label1, labelRemaining1);
textCounter2(textArea2, 865, label2, labelRemaining2);
// alert("Event Listener - DOMContentLoaded");
}
alert("PageLoadStuff Complete");
}
var isPostBack = '<%= this.IsPostBack%>' == 'True';
if (isPostBack) {
alert("It's a PostBack!");
const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
alert(textArea2);
document.removeEventListener('DOMContentLoaded', PageLoadStuff);
textArea2.removeEventListener('input', IncrementCounters);
alert("EventListeners Removed");
PageLoadStuff();
}
if (document.readyState == 'loading') {
// still loading, wait for the event
document.addEventListener('DOMContentLoaded', PageLoadStuff);
} else {
PageLoadStuff();
}
Sys.Application.add_load(function () {
alert("Add_Load");
PageLoadStuff();
});
function textCounter(field, maxlimit, label, label2) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else {
label.innerHTML = maxlimit - field.value.length;
}
if (field.value.length > maxlimit - 500) {
label.style.color = "#FF0000";
label2.style.color = "#FF0000";
}
else {
label.style.color = "#000000";
label2.style.color = "#000000";
}
// alert("textCounter Fired");
}
function textCounter2(field, maxlimit, label, label2) {
if (field.value.length > maxlimit)
field.value = field.value;
else {
label.innerHTML = maxlimit - field.value.length;
}
if (field.value.length > maxlimit - 200) {
label.style.color = "#FF0000";
label2.style.color = "#FF0000";
}
else {
label.style.color = "#000000";
label2.style.color = "#000000";
}
// alert("textCounter2 Fired");
}
</script>
<body>
<table>
<tr>
<td></td>
<td>
<textarea id="TextBox_Follow_Up_Answer2" style="width: 600px; height: 120px;" maxlength="3000" runat="server"></textarea>
<br />
<span id="Label_Answer_Char_Count">3000</span>
<span id="Label_Answer_Char_Remaining">characters remaining</span> :
<span id="Label_Answer_Char_Count2">865</span>
<span id="Label_Answer_Char_Remaining2">characters remaining for email</span>
<br />
</td>
</tr>
<tr style="background-color: lightgray; color: black; border-spacing: 0; padding: 0; border-collapse: collapse;">
<td>
<asp:Label ID="Label44" runat="server" Text="Article Number:"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox_Answer_Article_Number" runat="server" Width="300px" MaxLength="100"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label45" runat="server" Text="Section Number:"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox_Answer_Section_Number" runat="server" MaxLength="50" Width="300px"></asp:TextBox>
</td>
</tr>
<tr style="background-color: lightgray; color: black; border-spacing: 0; padding: 0; border-collapse: collapse;">
<td>
<asp:Label ID="Label46" runat="server" Text="Actual Response Method:"></asp:Label>
<asp:Label ID="Label65" runat="server" Text="*" ForeColor="Red" Font-Size="Large"></asp:Label>
</td>
<td>
<asp:Button ID="Button_Create_Email" runat="server" Text="Create Email" CssClass="action_button" Height="22px" Width="200px" OnClick="Button_Create_Email_Click" />
</td>
</tr>
</table
</body>
按钮的隐藏代码：
protected void Button_Create_Email_Click(object sender, EventArgs e)
{
string question;
string article;
string section;
string answer = WebUtility.HtmlDecode(TextBox_Follow_Up_Answer2.Value);
string answer_article = TextBox_Answer_Article_Number.Text;
string answer_section = TextBox_Answer_Section_Number.Text;
Page.ClientScript.RegisterStartupScript(this.GetType(), "email", "parent.location='mailto:[email protected]?Subject=Coach Response for Answer
"%0D%0A %0D%0AAnswer: " + answer +
"%0D%0AAnswer Article: " + answer_article +
"%0D%0AAnswer Section: " + answer_section +
"%0D%0A %0D%0AREMINDER: If this answers your question, please accept the answer in the Question Response Page." +
"'", true);
}
const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
仅当它是回发且位于任何函数之外时才会执行，在加载下面的 HTML 之前，因此此时您通过 id 搜索的元素尚不存在。您需要将回发代码移动到文件末尾的另一个
<script>标记中，就在关闭
</body>