解决jquery绑定点击事件失效问题

解决jquery绑定点击事件失效问题

因为自己在写学校的期末作业，遇到了原代码改变后，绑定的点击事件无效的问题，各种查文档，又百度了好久都没解决。

最后还是想起之前学期学Jquery的作业遇到过，翻出之前的作业，终于解决了！
所以发出来，希望能解决相关问题，也给自己留个笔记。

我搞反了这两个类名的的位置，所以没效果，麻了。

 下面直接搬代码吧！

1、导入jq文件。

2、HTML代码：

<div class="main">
			<form action="">
				<div class="demo1">
					<div>
						<input type="text" value="PHP" />
						<a href="#" class="up">[上移]</a>
						<a href="#" class="down">[下移]</a>
						<a href="#" class="del">[删除]</a>
					</div>
					<div>
						<input type="text" value="JavaScript" />
						<a href="#" class="up">[上移]</a>
						<a href="#" class="down">[下移]</a>
						<a href="#" class="del">[删除]</a>
					</div>
				</div>
			</form>
			<form action="">
				<div class="demo2">
					<a href="#" style="color: red;line-height: 50px;">✚ 添加项目</a>
					<div style="display: none;">
						添加到列表：
						<input type="text" value="" />
						<button type="button" id="add">添加</button>
						<button type="button" id="cancel">取消</button>
					</div>
					
				</div>
			</form>
		</div>

3、jq代码：

$(function(){
				//上移
				$('.demo1').on('click','.up',function(){
					var $par = $(this).parent();
					if($par.index()==0){
						alert('已经是第一个！')
					}else{
						$par.prev().before($par);
					}
				})
				//下移
				$('.demo1').on('click','.down',function(){
					var $par = $(this).parent();
					if($par.index() == $('.demo1').children().length-1){
						alert('已经是最后一个！')
					}else{
						$par.next().after($par);
					}
				})
				//删除
				$('.demo1').on('click','.del',function(){
					var val = confirm('你确定要删除？');
					if(val==true){
						$(this).parent().remove();
					}else{
						return false;
					}
				})
				//添加
				$('.demo2 #add').click(function(){
					var $content = $('.demo2 input').val();
					var $input = '<div><input type="text" value="PHP" /> <a href="#" class="up">[上移]</a> <a href="#" class="down">[下移]</a> <a href="#" class="del">[删除]</a></div>';
					$('.demo1').append($input);
					$('.demo1 input').last().attr('value',$content);
					$(this).prev().val("");
				})
				//取消
				$('.demo2 #cancel').click(function(){
					$(this).prev().prev().val("");
					$(this).parent().hide();
				})
				//隐藏
				$('.demo2 a').click(function(){
					$('.demo2 div').show();
				})
			})

代码应该复制了就能用，希望能帮助到你。