使用jquery如何给后来添加的元素也增加监听事件

最新推荐文章于 2023-08-08 16:12:21 发布
最新推荐文章于 2023-08-08 16:12:21 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39056803/article/details/85778727
版权

问题描述：想要给id="abc"的div追加一个新的div，并且让新div具有“单击事件”的监听

原始状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/jquery-1.11.0.js"></script>

	<body>
		<div id="abc" style="width: 100px; height: 100px; background: red;"></div>
		<button id="button">提交信息</button>
	</body>
	<script>
		$("#button").click(function() {
			$("#abc").append("<div id='123' class='123' style='width: 50px; height: 50px; background: blue;'</div>");
		});

		$('.123').on("click",function(){
			alert('OK');
		});
	</script>
</html>

这种放方式只能给当时已经存在的class="123"的元素增加监听事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/jquery-1.11.0.js"></script>

	<body>
		<div id="abc" style="width: 100px; height: 100px; background: red;"></div>
		<button id="button">提交信息</button>
	</body>
	<script>
		$("#button").click(function() {
			$("#abc").append("<div id='123' class='123' style='width: 50px; height: 50px; background: blue;'</div>");
		});
		$(document).on('click', '.123', function() {
			alert("OK");
		})
	</script>
</html>

这种可以给以后的也添加监听事件

划重点：

$(document).on('click', '.123', function() {
    alert("OK");
})

 

玄昌盛不会编程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
10-23
在jQuery中，动态新增的元素...这两种方法都可以有效地解决动态添加元素的事件绑定问题。根据项目的需求和兼容性要求，你可以选择适合的方法。在实际开发中，使用`.on()`更为常见，因为它在性能和API设计上都更加优化。
jQuery的三种bind/One/Live/On事件绑定使用方法
10-20
`live()`是jQuery的一个创新，它允许动态绑定事件，即不仅对现有元素有效，对将来添加到DOM中的元素也有效。`live()`通过在文档级别捕获事件，然后根据选择器判断是否向下传播事件，提高了效率。由于性能和设计上的...
jQuery 中 on 方法-----给未来元素添加事件
weixin_30832143的博客
10-16 114
<li class='clear dir-li'> <div class='left title'>　添加到目录：</div> <div class='left item' id='dir-ctrl-dv'> <if condition="$dirs neq ''"> &...
jQuery学习：事件委托--新添加的元素没有监听
weixin_47295886的博客
11-13 451
将多个子元素li的事件监听委托给父辈元素ul处理 监听回调函数是加在父辈元素上 父元素.delegate(子元素 事件名 回调函数) this是发生事件的子元素 移除事件的委托：父元素.undelegate(事件)
jquery on函数监听动态添加的元素
东语的专栏
12-15 2179
支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。 案例如下： <!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"&g
jQuery为动态加载完成的元素添加点击事件
yexiaojiu1的博客
05-13 1380
1.加载元素 $.ajax({ type: "get", url:baseUrl + "/dict/classes", crossDomain:true, dataType:"json", cache:false, success: function(msg) { if(!msg ) { return; } ...
jq click 监听append 后的元素
qq_40341527的博客
03-19 786
$('.btn').click(function(){ alert(1); }); 这样的监听 加入 body append("<button class='btn'></button>"); 那么 这个 按钮事件是不会触发的，要改为： $('body').on('click','.btn',function(){ alert(1); }); 找到它的父元素 ，...
jQuery表格增加删除行响应式代码.zip
07-11
通过在父元素上使用`on()`方法，我们可以确保所有的表格行（无论是初始存在的还是后来添加的）都能正确响应用户的操作。 在实际应用中，还需要考虑性能优化，比如批量操作而非逐个处理行，以及使用事件节流或防抖...
jQuery自适应页面手机端抽奖特效代码
03-20
通过在父元素上绑定事件处理函数，然后在事件冒泡过程中处理子元素的事件，这样可以确保即使元素是后来添加的，也能正确响应。 8. **性能优化**：考虑到移动设备的性能限制，应该避免过度的DOM操作和复杂的动画。...
jQuery中bind(),live(),delegate
10-30
今天我们将深入探讨jQuery中的事件绑定方法，包括`bind()`, `live()`, `delegate()`，以及后来推出的`on()`方法。这四个方法都是为了帮助开发者更方便地管理页面上的事件，特别是对于动态生成的元素。 1. **bind()*...
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5621
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
js动态创建的元素添加监听事件
十年之约
11-15 8918
js事件监听
项目总结之 jquery中，使用append增加新元素时，新增元素的绑定监听事件失效的解决办法
时清云的博客
10-11 495
$(“outerSelector”).on(“eventType”,“innerSelector”,function(){}); 举例：如果在一个中，通过append添加一个id="demo"的按钮，常用的直接$(“Selector”).on(“eventType”,function(){})监听事件函数，对新增加元素不起作用， 例如该按钮的点击监听事件应该这样写： $(".title").on(...
使用addeventlistener为js动态创建的元素添加事件监听
weixin_30571465的博客
04-06 1308
点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul></ul> <script type="text/javascript"> var num = 1; var u=document.querySelector("ul"...
js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
weixin_29229055的博客
06-03 2863
//已存在div//创建标签function createpage(){var span=document.createElement('span')span.innerHTML=“测试span”//设置属性span.setAttribute("class","gopage");var pagenum=document.getElementById("pagenum")pagenum.append...
解决jquery中，使用append增加元素时，该元素的绑定监听事件失效的办法
JamesCole的博客
10-09 5902
实现格式如下： $("outerSelector").on("eventType","innerSelector",function(){}); 举例：如果想要设置一个在中append的一个id="demo"的按钮的点击事件，则可以这样写： $(".title").on("click", "#demo", function(){});
jQuery遍历li下的a标签，添加参数
ansheng02的博客
01-22 3147
$('.storeUrl a').each(function(){ var Ahref = $(this).attr('href'); Ahref = Ahref + "?longitude="+longitude + "&amp;latitude=" + latitude; 　　 $(this).attr("href",Ahref); }); li标签添加class="...
通过js事件委托给后来添加的元素加点击事件
业余前端的职业经历
06-28 1498
有的元素可以第一次加载的时候并没有存在页面中，可是我们经过一些操作之后追加到dom树上，这个时候我们要是能提前添加上事件就好了。 废话不多说还是，直接拿例子来说事情 // 引入jquery库 方便进行dom操作 需求就是 页面有一个按钮 点击生成一个p元素 然后点击p元素弹出一个hello world 事实上 此时p元素并不在我们的dom树上 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js">&l
jQuery元素内容操作的方法有多少种?
qinge_Crazy的博客
07-14 623
　　jQuery中操作元素内容的方法，主要包括html()方法、text()方法和val()方法。html()方法用于获取或设置元素的HTML内容，text()方法用于获取或设置元素的文本内容，val()方法用来获取或设置表单元素的value值。具体使用说明如表1所示。 表1 元素内容操作 　　需要注意的是，val()方法可以操作表单（select、radio和checkbox）的选中情况，当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况
jquery 给动态添加的select元素绑定change事件
最新发布
12-19
要给动态添加的select元素绑定change事件，可以使用jquery的事件委托机制。首先，需要在页面加载完成时，使用on方法对document对象进行委托，选择要绑定change事件的父级元素或者document本身。然后将事件类型设置为change，选择要委托的目标元素为动态添加的select元素，并在callback函数中处理change事件的逻辑。 具体的代码如下： ```javascript $(document).on('change', 'select.dynamic-select', function() { // 处理change事件的逻辑 var selectedValue = $(this).val(); console.log('选中的值为：' + selectedValue); }); ``` 在这段代码中，'select.dynamic-select'表示要委托的目标元素为class为dynamic-select的select元素，可以根据实际情况修改选择器。当动态添加的select元素被改变时，就会触发change事件，并执行callback函数中的逻辑。 通过这种方式，可以实现对动态添加的select元素进行change事件绑定，而且不会受到页面加载时元素是否存在的限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值