记录：js动态append添加的节点点击事件无效

最新推荐文章于 2023-04-03 23:49:14 发布
最新推荐文章于 2023-04-03 23:49:14 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： web

下拉菜单动态添加子菜单之后绑定事件无效

参考：https://blog.csdn.net/DUDUfine/article/details/73446120

修改后代码

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="UTF-8">
		<title></title>

		<link href="../css/music_songList.css" rel="stylesheet" type="text/css" />
		<link href="../css/music_mymusic.css" rel="stylesheet" type="text/css" />

		<!--导入jquery -->
		<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<link href="../css/common.css" rel="stylesheet" type="text/css" />
		<!-- Bootstrap -->
	</head>

	<body>

		<div class="center">
			
			<div class="main">
				
			    <!-- left 侧边栏 start -->
				<div id="left1">
					<!--左侧菜单-->
					<div class="body-menu">
						<!--主菜单1开始-->
						<div>
							<span class="s1">我的歌手</span>
						</div>
						<!--主菜单2开始-->
						<div>
							<span id="1" class="s1">创建的歌单</span><button class="addsonglist">+ 新建</button>
							<div class="clear"></div>
							<!--子菜单1开始-->
							<ul class="ul1">
								<li class="chang" id="">
									<img src="../imges/song/zb1.jpg" />
									<!--删除子菜单-->
									<a class="del" title="删除" href="#"></a>
									<!--歌单文字信息-->
									<div class="song-list-info">
										<div class="li-list-name">我喜欢的音乐</div>
										<div class="song-number">
											<span>20</span> 首
										</div>
										
									</div>
								</li>
								<li>
									<img src="../imges/song/zb1.jpg" />
									<a class="del" title="删除" href="#"></a>
									<div class="song-list-info">
										<div class="li-list-name">我喜欢的音乐</div>
										<div class="song-number">
											<span>20</span> 首
										</div>
									</div>
								</li>
								<li>
									<img src="../imges/song/zb1.jpg" />
									<a class="del" title="删除" href="#"></a>
									<div class="song-list-info">
										<div class="li-list-name">我喜欢的音乐</div>
										<div class="song-number">
											<span>20</span> 首
										</div>
									</div>
								</li>
							</ul>
							<!--子菜单1结束-->
						</div>
						<!--主菜单2结束-->
						<!--主菜单3开始-->
						<div>
							<span id="2" class="s2">收藏的歌单</span>
							<!--子菜单2开始-->
							<ul class="ul2">
								<li>
									<img src="../imges/song/zb1.jpg" />
									<div class="song-list-info">
										<div class="li-list-name">我喜欢的音乐</div>
										<div class="song-number">
											<span>20</span> 首
										</div>
									</div>
								</li>

							</ul>
							<!--子菜单2结束-->
						</div>
						<!--主菜单3结束-->
					</div>
				</div>
				<!-- left 侧边栏 end -->

				<div class="right-my">
					<iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="no" id="music_main_conten" src="music-songList/songList.html"></iframe>

				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="hide">
			<div class="tan">
				<div class="head">新建歌单</div>
				<div class="tan-center">

					<span>歌单名：</span><input class="content" type="text"/>

					<div class="button">
						<span>可通过“收藏”将音乐添加到新歌单中</span><br/>
						<button type="button" class="q-add">新建</button>
						<button type="button" class="close">取消</button>

					</div>

				</div>
			</div>
		</div>
		<script>
			$(function() {
				//下拉菜单
				$('.body-menu div span').on('click', function() {
					var ulc = ".ul" + $(this).attr("id");
					$(ulc).slideToggle();
				});
				
				//创建歌单
				$('.addsonglist').click(function() {
					$('.hide').show();
					$('.q-add').show();
					$('.submit').hide();
				});
				
				//修改--未实现
				$('.submit').on('click', function() {
					obj.text($('.content').val());
					$('.hide').hide();
				});
				
				//确认添加
				$(document).on('click','.q-add', function() {
					var str = '';
					var n = $('.content').val();
					str += '<li><img src="../imges/song/zb1.jpg" />'+
					'<a class="del" title="删除" href="#"></a>	'+
					'<div class="song-list-info"><div class="li-list-name">'+n+
					'</div><div class="song-number">'+
					'<span>0</span> 首</div></div>	</li>';
					$('.content').val("")
					$(".ul1").append(str);
					
					$('.hide').hide();
					
				});
				//修改后代码---------删除歌单
				$(document).on('click', '.del',function() {
					
					if(confirm('确定删除歌单？'))
						$(this).parent().hide();
				});

			});
		</script>
	</body>

</html>
qq_39968438
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动态添加元素事件失效问题解决方法
10-25
在示例中，解决动态添加元素事件失效的问题，我们可以将`.x .y`的点击事件绑定改为： ```javascript $(".y").on('click', '.x', function() { // 在这里编写事件处理代码 }); ``` 这段代码会监听`.y`类的所有元素...
js动态添加meta标签
马优晨
01-13 9229
有时候我们需要动态添加meta标签和里面的内容，如何添加呢？ 举例： // 手动添加mate标签 const addMeta = (name, content) => { const meta = document.createElement('meta'); meta.content = content; meta.name = name; document.getElementsByTagName('head')[0].appendChi..
关于JSP页面meta标签无效问题
qq_35637640的博客
11-28 1652
        今天在工作中编写jsp页面，打开后jsp页面总是默认以ie5文档模式进行解析，导致很多元素不兼容，js报错。              为了实现使用最新浏览器版本进行解析，在jsp页面的&lt;head&gt;&lt;/head&gt;标签中加入了&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"/&gt;标签，打开js...
js 动态设置meta
qq_42617840的博客
09-24 3470
$("body").css("background", "url(/Img/account/bgHuaAn.png) center no-repeat");
动态设置meta标签
u010227042的博客
08-25 1930
有时候在项目中打开别的网页，需要给网页设置meta，如缩放禁止等。这时候在index.html中设置失效 需要额外设置。 可以使用插件vue-meta： 文档：https://github.com/declandewet/vue-meta#npm { metaInfo: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1'...
JQuery Ajax 异步操作之动态添加节点功能
10-19
这种方法的优点是即使动态添加了新的元素，事件也会正确地绑定，因为它们的父元素（`body`）已经监听了点击事件。 3. **使用`$.ajax`的`complete`或`done`方法**：除了在`success`回调中绑定事件外，还可以在`...
JS中appendChild追加子节点无效的解决方法
10-17
然而，在某些情况下，我们可能会遇到`appendChild`追加子节点无效的问题。这个问题通常与DOM操作的规则有关，特别是当尝试将一个节点添加到多个父元素时，会违反DOM结构的一致性。 首先，让我们深入了解一下`...
TemplateBuilder:HTML模板生成器
05-01
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的...配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
动态添加js、css、meta元素
weixin_30710457的博客
04-03 353
2012年3月31日 出去工作的同学说大学的生活 是最好玩的，国家假期、周末、还来个寒暑假，玩到你蛋疼。大三最后一个学期了，下半年就要去实习了，闲的下来吗？ 由于网站的主要频道页和列表页的头部和底部都是一样的，如果将每个页面放在单独的页面中，当头部和底部需要更改时维护量太大。于是想把头部和底部做成母版页，频道页和列表页的具体内容放到内容页中。这样当头和底需要改动时，只要...
react插入meta标签，解决Https链接失效问题
低调哥的博客
02-07 4120
react外部链接失效问题 react外部链接在生产环境报错Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'. 原因：HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP...
关于js jquery动态生成的元素增加点击事件不起作用
zp315379004的博客
05-28 1009
$(“#a”).click(function(){ console.log('静态元素，可以显示；但是f') })
JS动态添加元素后事件不起作用失效
qq_51554120的博客
07-20 3609
2、同样，当你使用类似于varaa=document.getElementsByTagName(“动态生成的元素”);来获取动态生成的元素的时候也是获取不到的，因为网页只会执行一次初始化绑定，之后动态生成的dom元素也是监测不到的。1、onclick事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了。jQuery事件委托。...
js给动态创建出来的元素添加事件
文龙刚的博客
12-15 2895
js给动态创建出来的元素添加事件
JS_js如河添加meta和title
小歪博客
04-25 1195
js如何添加title <title ></title> document.title = '首页'; js如何添加meta <meta name="keywords" content=""/> <meta name="description" content=""/> document.querySelector('meta[name="...
JS append后获得的id、class 无法通过获取节点添加点击事件
weixin_44394502的博客
04-03 1008
原因：append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。根据共同的父级div是在HTML结构中的，所以将循环获得的单击事件代理给div，通过单击获得的class名来判断点击的是哪一个对象，再进行具体操作。解决方法： 事件代理。
js 新追加的元素点击事件没触发
qq_44647223的博客
12-15 1043
常见情况： 监听html中某个类的元素的点击事件，当新追加同一个类的元素时，点击新追加的元素没有反应。 例如： <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> .divs{ height: 100px; width: 100px; background-color: red; margin: 20px;
js动态append添加的节点点击事件无效
热门推荐
DUDUfine的专栏
06-19 1万+
js动态append添加的节点点击事件无效问题
JS append添加后的元素点击事件无效实践与分析
qq_35779012的博客
10-08 1142
原因： append的节点是在整个文档加载完成后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效. 解决办法： 用事件委托的方法解决 demo如下： 或者: $(document).on("click",".Node",function(){ }) ...
jq给动态插入iframe添加点击事件
最新发布
02-01
使用jQuery给动态插入的iframe添加点击事件的方法如下： 1. 首先，需要先动态插入iframe元素到文档中。可以使用jQuery的append()方法，将iframe元素添加到指定的父元素中。例如： ```javascript var iframe = $('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值