<!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>
上面代码斜体加黑处, 备注的代码不能执行调用函数, 而用父元素或祖先元素绑定则起作用! 这是什么问题?
说说我的理解好吧：
1. 先把你的最开始的事项简化成下面这样
<script type="text/javascript" >
$(function () {
$('.submit').click(function (){
....do domething.....
}
$('.del').on('click',function () { //楼主的想法是直接在本标签加事件
.......do domething......
})
<script>
2. 但是实际的情况是，<script></script>中就是我专门用下划线表示出来的那部分的意思是：在文档加载完成之后执行的操作，而且按我自己的理解，它是加载完成后只执行一次的。那么我就想问一下楼主了，在文档加载完成之后里面有 .del 这个元素吗？很明显没有，这个元素不是在文档加载之后就有的，它是你在触发了.submit的click事件后才有的。所以在文档加载之后根本就没有这个元素，它也就无法为它添加事件了
// $('.del').on('click',function () {
// $('.inner').eq($(this).index(this)).remove();
// })
这时候并没有.del
当点击submit时创建了才创建了input
这时候的input没有click事件
所有点击没反应
可以这样改
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');
$('.del').click(function () {
//$('.inner').eq($(this).index()).remove();
$(this).parent().remove();
});
}
else {
alert('please input something');
}