js给动态创建出来的元素添加事件

场景：因为js都是dom操作，所以如果动态创建一个元素的话，本身是不带自身事件的，因为在创建这个元素前，dom已经创建完成了，所以在动态创建出来的元素身上不包含事件

所以我们需要给这些动态创建出来的元素身上添加上你想要添加的事件

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>给动态创建出来的元素加事件</title><style type="text/css">*{margin:0;padding:0;list-style-type:none;}span{margin:100px 10px 20px 150px;width:200px;border:1px solid #666;display:block;cursor:pointer;}div{margin-left:150px;width:500px;height:300px;border:1px solid #666;}</style>
</head>
<body><span>动态添加元素</span><div></div>
</body>
</html>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">$(function(){$('span').click(function(){$('div').append('<a class="btn" href="javascript:;">我是动态添加的a元素</a>')});//       $(document).on("click", ".btn", function() {//方法一
//       console.log('事件添加成功')
//      });$("div").delegate(".btn","click", function() {//方法二，这是一个事件委托方法，是给页面开始加载欠就存在的元素加console.log('事件添加成功')});});
</script>

js给动态创建出来的元素添加事件相关推荐

js动态添加控件服务器响应,JS实现动态给标签控件添加事件的方法示例
本文实例讲述了JS实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans ...
MFC中动态创建控件以及添加事件响应
本文实例讲述了MFC中动态创建控件以及事件响应实现方法,分享给大家供大家参考.具体实现方法如下: 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态 ...
js动态创建div等元素实例
为了节省时间,就直接贴代码了!希望大家多多的关注我! <html><head><title>js动态创建div等元素实例</title><styl ...
php动态增加div,JavaScript动态创建div等元素实例
js动态创建div等元素实例 var Test={ createDiv:function(){ var div = document.createElement('div'); div.id=&quo ...
javascript动态创建radio button元素支持IE/Firefox
我们都知道在IE中创建表单元素可以有三种方式 var oInput = document.createElement("input"); var oInput = document ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
网页制作插入新的元素，并且为插入的元素添加事件
怎样向网页中插入新的元素,在JQuery中有这样的几个函数,其实写网页最大的便利也是在于很多的网页动态的实现都有现成的函数,我们需要做的就是在这个环境中应用这些函数,实现我们的动态的操作. 向网页中插 ...
html页面中给元素添加事件常见的3种语法
1. 使用元素的事件属性 1.1 用法 onxxxx="f();" 例如为Btn按钮添加单击事件 <script> function aaa(){alert(" ...
给未来元素添加事件 jquery 1.10.2 版本
<div class='dv'><button type='button' class='btn'>点击事件按钮</but ...

js给动态创建出来的元素添加事件

js给动态创建出来的元素添加事件相关推荐

最新文章

热门文章