ASP.NET Control 的 GetElementById 不断返回“null”；

Question

我花了一个多小时试图解决这个问题，我很绝望。我正在尝试访问 DOM 中从 ASP.NET 控件创建的节点。我使用完全相同的 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 Body

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

Resulting Javascript & ASP.NET Header ASP.NET Body Resulting 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 的文档准备中事件处理程序。

更新：

为了响应您的编辑，您已经差不多完成了，但是（正如其他人提到的）您需要为 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 的函数）。

Answer 2

选择 jQuery。

那么你可以

$(function()
{
    var el = document.getElementById('<%= txtBox.ClientID %>');
    el.onclick() { alert('test!!'); }
});

Answer 3

其他答案已经指出了错误（尝试在 DOM 节点出现在文档中之前访问它们），我只会指出替代解决方案。

简单方法

在 HTML 中添加脚本元素，位于您要访问的元素的结束标记下方。最简单的形式是将其放在结束正文标记之前。此策略还可以使页面显示得更快，因为浏览器不会暂停加载脚本的 HTML。总体加载时间是相同的，但是脚本仍然需要加载并执行，只是这个顺序让用户感觉更慢。

使用 window.onload 或

每个浏览器都支持此方法，但它会在加载所有内容后触发，因此页面可能会在短时间内显示为不活动状态（如果加载已解除，则可能会显示很长时间）。但它非常坚固。

使用 DOM 就绪函数

其他人建议使用 jQuery，但您可能不希望仅仅为了 DOM 就绪函数就需要 4,000 行和 90kb 的代码。 jQuery 相当复杂，很难从库中删除。然而，David Mark 的 MyLibrary 非常模块化，并且很容易提取您想要的部分。代码质量也非常好，至少与任何其他库相同。

以下是从 MyLibrary 中提取的 DOM 就绪函数的示例：

var API = API || {};

(function(global) {

  var doc = (typeof global.document == 'object')? global.document : null;

  var attachDocumentReadyListener, bReady, documentReady,
      documentReadyListener, readyListeners = [];
  var canAddDocumentReadyListener, canAddWindowLoadListener,
      canAttachWindowLoadListener;

  if (doc) {
    canAddDocumentReadyListener = !!doc.addEventListener;
    canAddWindowLoadListener    = !!global.addEventListener;
    canAttachWindowLoadListener = !!global.attachEvent;

      bReady = false;
      documentReady = function() { return bReady; };
      documentReadyListener = function(e) {
        if (!bReady) {
          bReady = true;
          var i = readyListeners.length;
          var m = i - 1;
          // NOTE: e may be undefined (not always called by event handler)
          while (i--) { readyListeners[m - i](e); }
        }
      };

      attachDocumentReadyListener = function(fn, docNode) {
        docNode = docNode || global.document;
        if (docNode == global.document) {
          if (!readyListeners.length) {
            if (canAddDocumentReadyListener) {
              docNode.addEventListener('DOMContentLoaded',
                                        documentReadyListener, false);
            }
            if (canAddWindowLoadListener) {
              global.addEventListener('load', documentReadyListener, false);
            }
            else if (canAttachWindowLoadListener) {
              global.attachEvent('onload', documentReadyListener);
            } else {
              var oldOnLoad = global.onload;              
              global.onload = function(e) { 
                  if (oldOnLoad) { 
                    oldOnLoad(e); 
                  }
                  documentReadyListener();
              };
            }
          }
          readyListeners[readyListeners.length] = fn;
          return true;
        }
        // NOTE: no special handling for other documents
        // It might be useful to add additional queues for frames/objects
        else {
          if (canAddDocumentReadyListener) {
            docNode.addEventListener('DOMContentLoaded', fn, false);
            return true;
          }
          return false;
        }
      };

      API.documentReady = documentReady;
      API.documentReadyListener = documentReadyListener;
      API.attachDocumentReadyListener = attachDocumentReadyListener;

  }
}(this));

将其用于您的情况：

function someFn() {
  var el = document.getElementById('MainContent_txtBox');
  el.onclick = function() { alert('test!!');
}

API.attachDocumentReadyListener(someFn);

或者可以提供匿名函数：

API.attachDocumentReadyListener(function(){
  var el = document.getElementById('MainContent_txtBox');
  el.onclick = function() { alert('test!!');
};

如果您只需要一个用于特定情况的函数，则可以在 10 行代码中完成非常简单的 DOM 就绪函数，但当然它们的健壮性较差并且可重复使用性较差。