为什么直接用本标签绑定事件不行?一定要用父元素或祖先元素绑定才能起作用?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<style type="text/css">
*{padding: 0;margin: 0;}
.wrapper{
width: 800px;
height: 150px;
font-size: 20px;
margin:10px auto;
}
.inputBox{
display: block;
width: 700px;
height: 100px;
margin: 0 auto;
overflow: hidden;
font-size: 14px;
}
.submit{
float: right;
margin: 10px 50px;
width: 50px;
height: 30px;
line-height: 30px;
font-size: 15px;
text-align:center;
}
.con{
width: 700px;
margin: 10px auto;
clear: both;
}
.inner{
width: 700px;
height: 200px;
background: #eee;
margin: 10px auto;
font-size: 15px;
clear: both;
}
.news{
width: 600px;
height: 100px;
margin: 10px auto;
clear: both;
}
.del{
float: right;
margin:10px 10px;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
}
.time{
float: right;
width: 200px;
height: 30px;
line-height: 30px;
text-align: right;
}
</style>
<script type="text/javascript" >
$(function () {
$('.submit').click(function () {
var date = new Date(),
month = date.getMonth() +1,
day = date.getDate(),
hours = date.getHours(),
minutes = date.getMinutes();
if ($('.inputBox').val()!='') {
$('<div class="inner"><input type="button" value="删除" class="del"/><div class="news">' + $('.inputBox').val() + '</div><div class="time">' + month + '月' + day + '日' + hours + ':' + minutes + '</div></div>').prependTo('.con');
}
else{
alert('please input something');
}
})
//console.log("1");
// $('.del').on('click',function () {
// $('.inner').eq($(this).index(this)).remove();
// })
$(".con").on("click",".del",function(){
$(this).parents(".inner").remove();
})
})
</script>
<body>
<!-- 输入框开始 -->
<div class="wrapper">
<textarea class="inputBox"></textarea>
<input type="submit" value="提交" class="submit"/>
</div>
<!-- 输入框结束
内容区开始 -->
<div class="con">
<!-- <div class="inner">
<input type="button" value="删除" class="del"/>
<div class="news"></div>
<div class="time"></div>
</div> -->
</div>
</body>
</html>
上面代码斜体加黑处, 备注的代码不能执行调用函数, 而用父元素或祖先元素绑定则起作用! 这是什么问题?
