on后绑定事件不生效

最新推荐文章于 2022-06-30 10:42:55 发布

css3html5csdn

最新推荐文章于 2022-06-30 10:42:55 发布

阅读量447

点赞数 1

分类专栏： js 文章标签： on后绑定事件不生效

本文链接：https://blog.csdn.net/qq_38402659/article/details/102582034

版权

js 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<script>
function adddiv(){
  console.log('append')
  $('#qw').append('<button class="ppp">1</button>')
}
$("#qw").on('click','.ppp',function(){
  console.log(1,'在#qw之前绑定事件无效')
})
</script>
<body>
  <button onclick="adddiv()">121</button>
  <div id="qw"></div>
</body>
</html>
<script>
$("#qw").on('click','.ppp',function(){
  console.log(1,'在#qw之后绑定事件有效')
})
</script>

上面的代码中若没有下面此行代码，事件是绑定不了的，这是因为在加载玩DOM树之前绑定事件就已经执行了，这时虽然执行了却找不到节点对象，所以事件会失效。
解决办法,在绑定之前加

$(document).ready(function(){   //这一行语句的意思是等所有DOM树加载完成后执行绑定事件工作
	$("#qw").on('click','.ppp',function(){
	  console.log(1,'在#qw之前绑定事件无效')
	})
})

如果要不使用ready()，使事件绑定则需要将js代码编写在html末端，这样做的原因是使浏览器先加载完页面DOM树信息，再加载js代码段，这样绑定的事件就可以找到对应的节点对象了。

css3html5csdn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
on后绑定事件不生效

<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script></head><script>...
复制链接

扫一扫