ASP.NET Control的GetElementById保持返回'null'

Question

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

ASP.NET标头

<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 Body

<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的"Inspect Element"功能查看时间轴时,似乎并非如此.当我创建一个常规的textarea框来测试和实现相同的代码(当然是不同的id)时,会触发警告框.

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

编辑:有效的Wierd代码,但仅限于初始页面加载; 点燃onload而不是onchange.甚至jQuery说.ready已经显然无法正常工作.啊!!

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

Answer 1

假设呈现的标记确实以该顺序出现,问题是在JavaScript尝试找到它时该元素尚不存在.

要么将JS移动到元素下面(最好是在正文的末尾),要么将其包装在类似jQuery的文档就绪事件处理程序中.

更新:

为了响应您的编辑,您几乎就在那里,但(正如其他人所提到的)您需要为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).