javascript - ASP.NET 控件的 GetElementById 不断返回 'null'

Question

我花了一个多小时试图解决这个问题，我很绝望。我正在尝试访问从 ASP.NET 控件创建的 DOM 中的节点。我使用的是完全相同的 ID，在页面呈现后查看 HTML 源代码时，我可以看到它们是匹配的。这是我的 [根据建议进行了修改，但仍然无法正常工作] 代码:

ASP.NET header

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
    $(document).ready(
        var el = document.getElementById('<%= txtBox.ClientID %>');
        el.onchange = alert('test!!');
    )
    </script>
</asp:Content>

ASP.NET 正文

<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>

从上面生成的 Javascript 和 HTML

<script type="text/javascript">
$(document).ready(
    var el = document.getElementById('MainContent_txtBox');
    el.onchange = alert('test!!');
)
</script>
...
<textarea name="ctl00$MainContent$txtBox" id="MainContent_txtBox"></textarea>

我只能假设脚本在解析控件 ID 之前加载，但是当我使用 Chrome 的“检查元素”功能查看时间线时，情况似乎并非如此。当我创建一个常规文本框来测试和实现相同的代码(当然不同的 id)时，警报框会触发。

我到底错过了什么？这让我发疯 >.<

编辑:有效的奇怪代码，但仅在初始页面加载时有效；触发 onload 而不是 onchange。连jQuery说 .ready 显然不能正常工作。啊!!

$(document).ready(function() {
    document.getElementById('<%= txtBox.ClientID %>').onchange = alert('WORKING!');
})

Answer 1

假设呈现的标记确实按该顺序出现，问题是在您的 JavaScript 尝试定位它时该元素尚不存在。

要么将该 JS 移动到元素下方(最好在正文的末尾)，要么将其包装在类似 jQuery's document ready event handler 的内容中.

更新:

为了响应您的编辑，您几乎完成了，但是(正如其他人所提到的)您需要为 onchange 事件分配一个函数，而不是 alert() 的返回结果。像这样:

$(document).ready(function() {
  // Might as well use jQuery to attach the event since you're already using
  //  it for the document ready event.
  $('#<%= txtBox.ClientID %>').change(function() {
    alert('Working!');
  });
});

通过编写 onchange = alert('Working');，您要求 JavaScript 将 alert() 方法的结果分配给 onchange 属性。这就是为什么它在页面加载时立即执行它，但实际上从未响应 onchange 事件(因为您没有分配该函数来运行 onchange)。