解决jQuery $(#id)或者getElementById没有找到元素的几种方法?

标签: javascriptgetElementById   时间:2017-09-23
什么原因可能导致jquery的$("#id")方法或document.getElementById方法没有找到元素呢?本文章向大家介绍出现这种情况的原因及解决方案,需要的朋友可以参考一下。

当您的脚本运行时,您尝试查找的元素不在DOM中。

你的js脚本位置可以对页面行为产生深远的影响。浏览器从上到下解析HTML文档。这意味着顺序很重要。通常,由于某些元素尚未添加到DOM中,脚本无法在html中找到稍后出现的元素。

参考下面示例:脚本1无法找到class为test的<div>,所以执行失败,返回null,脚本2成功找到class为test的<div>

<script>
  console.log("script #1: %o", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
  console.log("script #2: %o", document.getElementById("test")); // <div id="test" ...
</script>

通常有以下几种方法解决jQuery $("#id")或者getElementById没有找到元素:

 

1.移动脚本

将你的js脚本移动到页面底部</body>标签之前。以这种方式组织,文档的其余部分在您的脚本执行之前被解析:

<body>
  <button id="test">click me</button>
  <script>
    document.getElementById("test").addEventListener("click", function() {
      console.log("clicked: %o", this);
    });
  </script>
</body><!-- closing body tag -->

 

2.使用jquery的ready()

使用ready()延迟脚本执行直到DOM完全解析:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#test").click(function() {
      console.log("clicked: %o", this);
    });
  });
</script>
<button id="test">click me</button>

 

3.事件委托

委托事件的优点在于,它们可以处理后来添加到文档中的后代元素的事件。

当一个元素引发事件(前提是它是一个冒泡事件,并且没有停止其传播),该元素的祖先中的每个父进程也接收该事件。这允许我们将一个处理程序附加到一个现有的元素,并且在它们从后代中冒出来的样本事件时,甚至在处理程序被附加后添加的事件。我们所要做的就是检查事件是否被所需的元素引发,如果是,请运行我们的代码。

jQuery on()为我们执行这个逻辑。我们只提供一个事件名称,一个选择器为所需的后代和一个事件处理程序:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).on("click", "#test", function(e) {
    console.log("clicked: %o",  this);
  });
</script>
<button id="test">click me</button>

注意:通常,此模式是为加载时不存在的元素保留的,或者避免附加大量处理程序。还有一点值得指出的是,当我们附加一个处理程序document(为了说明的目的),你应该选择最近的可靠的祖先。

 

4.defer属性

使用js的defer属性。

defer,一个布尔属性]被设置为向浏览器指示在解析文档之后该脚本将被执行。

<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>
<button id="test">click me</button>

以上script是来自外部脚本。

document.getElementById("test").addEventListener("click", function(e){
   console.log("clicked: %o", this); 
});

注意:该defer属性当然看起来像一个魔法子弹,但重要的是要注意注意以下两点
1. defer只能用于外部脚本,即具有src属性的脚本。
2.注意浏览器支持,即IE <10中会出现错误

原文地址:http://www.manongjc.com/article/2152.html

上一篇:分享php多文件上传实现源码

下一篇:已是最后一篇