js函数的位置

最新推荐文章于 2024-09-08 19:34:03 发布

Embiid_

最新推荐文章于 2024-09-08 19:34:03 发布

阅读量1.8k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/Embiid_/article/details/80057955

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在做练习时写了如上代码，运行时并不报错，但是js失效。

得到两种解决方法：

----------1---------

 <script type="text/javascript">
 $(document).ready(function(){
 	$("#btn1").click(function(){
	   $("#mydiv").append("<p>hello world</p>")
  	});
 }) 	
 </script>

  <body>
  	<div id="mydiv" style="width:200px;height:200px;background-color: yellow"></div>
  	<button id="btn1">添加</button>
  </body>

----------2---------

  <body>
  	<div id="mydiv" style="width:200px;height:200px;background-color: yellow"></div>
  	<button id="btn1">添加</button>
  </body>

 <script type="text/javascript">
 	$("#btn1").click(function(){
	   $("#mydiv").append("<p>hello world</p>")
  	});	
 </script>

查阅资料后得到以下结论：

失败的原因：监听一个click事件，监听成功的前提是这个元素在当前dom中已被加载。

另一种就是可能你在页面加载完成后动态生成了某些元素，也就是说这个元素最初不在html中，此时click监听语句如果比生成语句执行的更早也会失效。

1.因为页面加载是从头到尾加载的，解析js的时候如果在js中使用的dom在这段js之前的位置没有出现那么会报错，$(document).ready(function(){})就是让你的dom加载完成之后再解析js的

2.浏览器解析遇到js的时候就会停止，但是并不会傻傻等待js的执行，所以建议把js放置在<body>下方