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

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

参考: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>
展开阅读全文

没有更多推荐了,返回首页