运行如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>页面未加载执行失败</title>

        <script type="text/javascript">

            document.getElementById("panel").onclick = function() {

                alert("元素已经加载完毕 !");

            }

        </script>

    </head>

    <body>

        <div id="panel">click me.</div>

    </body>

</html>

发现怎么点都不会出现提示的内容，这是为什么呢

那是因为dom还未加载完毕，那么如何解决呢？

　　　　　　　　方式一：将JS代码移到需要操作的html代码后面，建议放到body的外面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>4-1-2</title>

    </head>

    <body>

        <div id="panel">click me.</div>

        <script type="text/javascript">

                document.getElementById("panel").onclick = function() {

                    alert("元素已经加载完毕 !");

                }

        </script>

    </body>

</html>

方法二：将其写入页面加载函数，这样也可以

jQuery_页面加载问题的更多相关文章

  1. AnjularJS系列4 —— 单个页面加载多个ng-App

    第四篇,插播, 单个页面加载多个ng-App 在写范例的时候发现的问题 一个页面有多个ng-app,angular只会处理第一个ng-app 需要加载两个ng-app,需要进行手动加载: angula ...

  2. jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  3. 页面加载完成后，触发事件——trigger（）

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

  4. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  5. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  6. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  7. JavaScript在A页面判断B页面加载完毕（iframe load）

    今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...

  8. javascript 实现页面加载完再显示页面

    document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...

  9. java selenium (十三) 智能等待页面加载完成

    我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作.  否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后, 才能操 ...

随机推荐

  1. 必备idea 插件plugins 提高编码效率

    最近发现了几个非常好用   提高编码效率 的idea 插件 跟大家分享一下 因为idea自带的插件下载可能连接不上服务器而导致插件下载失败,所以这里推荐使用引入外部插件的方式 插件包也给你们准备好了( ...

  2. 云数据库 MariaDB 版

    基于MariaDB企业版全球独家合作认证,提供Oracle兼容性及众多企业级数据库特性.支持包括MySQL InnoDB等多种存储引擎,为不同需求的用户提供灵活的选择. 请看视频简介 优势 Oracl ...

  3. JAVA基础--JAVA API集合框架

    一.Map集合 1. map集合介绍 Collection集合的特点: 集合中存储的所有元素都是单一元素,元素和元素之间没有必然的关系.因此我们把Collection集合也称为单列集合. Map集合: ...

  4. Charlie's Change POJ - 1787

    Time limit 1000 ms Memory limit 30000 kB description Charlie is a driver of Advanced Cargo Movement, ...

  5. sql server row_number分页

    row_number分页 SELECT  TOP 10* --pageSize =10FROM (  SELECT    *, row_number () OVER (ORDER BY a.bsqID ...

  6. Java中字符串排序

    package com.fs.test; import java.util.ArrayList; import java.util.Collections; import java.util.List ...

  7. shell脚本中的日期处理

    Ps:这篇文章只是为了做个分类,以后有看到比较好的时间处理命令都会列在这里,您如果有什么好的时间处理命令,可以评论中添加,我会定期查看更新,谢谢! 1.定义一个参数DATE_TODAY,用于记录当天时 ...

  8. 全自动链接克隆KVM虚拟机

    virt-clone这个命令是基于全克隆的,也就是拷贝虚拟磁盘文件和虚拟配置文件来实现的完整克隆,速度慢,占用空间多 kvm软件包中并没有实现全自动链接克隆的命令或工具,只能手动实现,于是我决定写一个 ...

  9. 华为服务器XH628配置软RAID

    1.       硬RAID 1.1.       配置准备 本机型号为华为XH628,配有两块400GSSD,12块1.2TSAS盘.其中2块SSD做RAID1为系统盘,12块SAS盘做RAID5, ...

  10. jaxb解析xml工具类

    [quote]jaxb jdk 自带的解析xml的一种方式支持,只需要用注解对javabean进行数据绑定[/quote] package com.nnk.flowrecharge.common;im ...