js为动态创建的元素添加事件

最新推荐文章于 2024-06-10 13:43:26 发布
最新推荐文章于 2024-06-10 13:43:26 发布
阅读量5.3k 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhm0303/article/details/63252738
版权

html中直接生成的元素，添加事件，我们都知道，但是如何为一个动态生成的元素添加事件呢，jquery中的live方法可以做到这一点

具体实现可以在demo中看到

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/lib/jquery.js"></script>
	</head>
	<body>
		
		<button id="btn">添加事件</button>
		<div id="panel"></div>
		<script>
//		js原生实现
//			var btn=document.getElementById("btn");
//			btn.οnclick=function(){
//				var arr= [];
//				for(var i=0;i<10;i++){
//					arr.push("<p id='nep'>"+i+"</p>");	
//				}
//				
//			document.getElementById("panel").innerHTML=arr.join('<br/>');
//			}
//			
			
			//jquery部分实现
			$("#btn").click(function(){
				var arr= [];
				for(var i=0;i<10;i++){
					arr.push("<p id='nep'>"+i+"</p>");	
				}
				$("#panel").html(function(){
					return arr.join("<br/>");
				});
				
			});
		
			
			//为动态创建的html标签元素添加事件
			$("#nep").live("click",function(){
				var that=$(this);//获取当前点击的this对象
				console.log(that.text());
	
			});
			
			
			
		</script>
	</body>
</html>

水火土要努力
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动态创建元素 笔记
BowenXu11的博客
04-06 217
动态创建元素 //1.动态创建一个超链接 var aLink = document.createElement('a'); //2.设置超链接属性 aLink.href='http://www.baidu.com'; aLink.title='百度一下啊'; aLink.target='_blank'; aLink.innerText = '百度'; //3.把超链接追加到层中 ...
js 动态创建HTML元素
热门推荐
lanzhengwu的专栏
12-25 2万+
今天有个朋友要帮她完成一个小小的效果,发了点时间做了下,也不知道能不能达到要求,先帖了上来,下面是要求: 代码:textarea cols="60" rows="12">textarea> br/>选择答题数目:select  name="select1" id="select1" onchange="change1(this);">option value=0>请选择option
js 动态给元素添加、移除事件的实现方法
12-10
最近项目中要要到 js动态给给元素绑定事件，刚好之前没用到过这些，顺便学习一下，于是google了一下 事件，写了如下两个事件 一个添加事件 ，一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble) //参数event如上表所示, function是要执行的函数
jq追加html点击事件,jQuery - 给动态创建的元素添加事件绑定（给js新插入元素添加click事件）...
weixin_39652154的博客
06-02 408
1，问题描述(1)这里以点击事件为例，通过 click() 方法给页面上所有的“删除”按钮添加个点击响应。要注意的是，“删除”按钮除了页面上原有的之外，还可以通过代码动态插入。$(function() {//新增按钮点击响应$('#addBtn').click(function(){//添加一个新条目$('ul').append('动态新增条目' +' 删除');});//删除按钮点击响应$('....
# JavaScript动态的为元素添加事件
最新发布
good7ob的博客
06-10 251
在上面的例子中，我们首先通过getElementById方法获取了id为myButton的按钮元素，然后定义了一个名为handleClick的函数作为点击事件的处理函数。在上面的例子中，我们将点击事件绑定到id为parentElement的父级元素上，然后在事件处理函数中判断事件的目标元素是否为button，如果是，则触发相应的处理逻辑。在上面的例子中，我们获取了id为myButton的按钮元素，然后直接为其onclick属性赋予了一个匿名函数，当按钮被点击时，会触发这个匿名函数。
js中给一个元素添加事件
ahn32288的博客
06-15 176
给document全局文档的动作检测添加事件，这是禁止右键、禁止复制的页面的方式之一 try{ document.attachEvent("onclick",function(){onclick();},false); // IE使用这个 }catch(e){ document.addEventListener("onclick",function(){onclick()...
JS中事件的添加
Dear_Mr的博客
10-30 4138
在JS中，事件的添加主要有三种方式： 1. 直接在html标签上添加 <div onclick="代码段或者是函数">div</div> 这种方法也可以通过JS的obj.setAttribute("onclick", function(){........}完成2. 使用JS的DOM的方法添加 document.getElementById('div').onclick = function
js实现为新添加元素添加绑定事件
m0_64288219的博客
07-04 3186
不知道大家在写js的时候碰没碰到过这样一个问题：算了，还是直接上代码 就是有时我们使用querySelectAll(‘li’)只能获取html原有的li1,li2,li3标签，如果我们此时创建一个新的小li名为newLi并把它添加到div里面,querySelectAll(‘li’）就无法选取newLi。 因为 var li=document.querySelectorAll(‘li’); 把他放在第一行只能获取前三个，因为新的 小li还没有创建出来。 此时把 var li=document.
JS实现为动态创建的元素添加事件操作示例
01-19
本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考，具体如下： html中直接生成的元素，添加事件，我们都知道，但是如何为一个动态生成的元素添加事件呢，jquery中的live方法可以做到这一点 ...
js实现动态创建的元素绑定事件
10-21
在JavaScript编程中，动态创建元素并为它们绑定事件是常见的需求。这主要涉及到DOM操作和事件处理程序的绑定。在JavaScript中，有多种方法可以实现动态元素的事件绑定，但传统的方法对于新创建的元素可能不起作用。...
jQuery为动态生成的select元素添加事件的方法
10-21
8. 总结：通过使用jQuery的事件委托技术，开发者可以有效地为动态生成的元素添加事件处理器。这种方式不仅节省了资源，还提高了代码的效率和可维护性。在实际开发中，这种方法被广泛应用于各种需要动态内容更新的...
Js(DOM)动态添加节点和事件
zxl0016的专栏
03-10 1万+
function addEl(){    //找到要添加节点的父节点(table)    var tb = document.getElementById("tb");    //创建tbody节点，表格中必须有tbody才能添加，直接添加tr不成功    var tbody = document.createElement("tbody");    //创建tr节点    var t
js中的事件（给元素绑定事件）
zhangjinlei00的专栏
11-17 5514
function func1(){         alert('hello');     }     //html 和 javascript相分离的时候,给这个元素绑定一个事件 document.getElementById('click2').onclick=function(){         alert('hehe'); } //addEventListener()参数
vue加原生事件
simple_T的博客
05-20 204
Javascript点击事件的3种写法（复习）
qq_52099965的博客
11-17 1456
Javascript点击事件的3种写法（复习）
JavaScript实现动态添加的元素添加点击事件
qq_18932003的博客
10-25 1万+
在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？ 原生JavaScript 原生JavaScript主要有2种实现方式，第一种是在动态添加的html代码中添加oclick事件，然后传递一个唯一的参数来判断点击的是哪个，然后做相应的操作。 第二种是通过事件委托的原理进行处理，事件委托将一个 事件监听器实际上绑定到整个容器，然后每个列表项被点击就可以访问，这样效率更高。 具体的.
js为标签添加事件的方式和区别
kjprime的博客
02-27 3091
js为标签添加事件的3种方式 // 方法一 函数表达式 dom.onclik = function(){ /* 代码 */ } // 方法二 添加事件 div.addEventListener('click', function(){ /* 代码 */ }) // 方法三 在html标签中添加相应的函数 function funName(){ /* 代码 */ } <tag onclik="funName()">text</tag> 3种方式区别 我们已代码为切入点 &l
原生js javascript 给动态添加的元素绑定事件
一只爱吃糖的小羊
08-14 1万+
原生js 给动态添加的元素绑定事件的可能应用场景：在创建一个元素之后，需要给它绑定事件，这时候要用到事件委托。jQuery现在很少用了，就不说了，现在来说一下原生js的写法： let tag = `&lt;div class="newsBox"&gt; &lt;p class="newsList"&gt;Title: &lt;span class="newsUrl" id="newsUr.
原生js给动态创建的元素绑定事件
05-04
可以使用addEventListener()方法来给动态创建的元素绑定事件。 例如，如果你想给一个动态创建的按钮元素添加一个点击事件，可以使用以下代码： ```javascript // 创建按钮元素 var btn = document.createElement(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值