為什么直接用本標簽綁定事件不行?一定要用父元素或祖先元素綁定才能起作用?
<!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>
<!-- 輸入框結(jié)束
內(nèi)容區(qū)開始 -->
<div class="con">
<!-- <div class="inner">
<input type="button" value="刪除" class="del"/>
<div class="news"></div>
<div class="time"></div>
</div> -->
</div>
</body>
</html>
上面代碼斜體加黑處, 備注的代碼不能執(zhí)行調(diào)用函數(shù), 而用父元素或祖先元素綁定則起作用! 這是什么問題?
2016-09-12
說說我的理解好吧：
1. 先把你的最開始的事項簡化成下面這樣
<script type="text/javascript" >
$(function () {
? ? ? $('.submit').click(function (){
? ? ?? ?....do domething.....
? ???}
? ?? ?? $('.del').on('click',function () { ?//樓主的想法是直接在本標簽加事件
? ??? ? ?.......do domething......
? ??})
<script>
2. 但是實際的情況是，<script></script>中就是我專門用下劃線表示出來的那部分的意思是：在文檔加載完成之后執(zhí)行的操作，而且按我自己的理解，它是加載完成后只執(zhí)行一次的。那么我就想問一下樓主了，在文檔加載完成之后里面有 .del 這個元素嗎？很明顯沒有，這個元素不是在文檔加載之后就有的，它是你在觸發(fā)了.submit的click事件后才有的。所以在文檔加載之后根本就沒有這個元素，它也就無法為它添加事件了
2016-09-12
// $('.del').on('click',function () {
// $('.inner').eq($(this).index(this)).remove();
// })
這時候并沒有.del
當點擊submit時創(chuàng)建了才創(chuàng)建了input
這時候的input沒有click事件
所有點擊沒反應(yīng)
可以這樣改
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');
? ? ? ? ? ? }