最近在練習(xí)做一個彈框，
===============[part 1]================================
先放代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>彈窗試驗</title>
<!-- Bootstrap -->
<link rel="stylesheet">
<style type="text/css">
.pop_wrap {
z-index: 1400;
width: 1360px;
position: absolute;
top: 150px;
display: none;
}
.pop_con {
width: 500px;
height: 200px;
margin: 0 auto 0;
background: #fafafa
}
.pop_p {
font-size: 20px;
margin-top: 50px;
text-align: center;
}
.pop_row {
margin-top: 50px;
}
.pop_btn {
text-align: center;
height: 30px;
}
.w_200 {
width: 200px;
}
.pop_mask {
z-index:1300;
position: absolute;
top:0px;
left:0px;
background:#000000;
opacity:0.5;
width:1920px;
height:2052px;
display: none;
}
</style>
</head>
<body>
<div class="pop_wrap" id="confirm_pop">
<div class="container pop_con">
<p class="pop_p">確定要取消么?</p>
<div class="row pop_row">
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button>
</div>
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">確定</button>
</div>
</div>
</div>
</div>
<input id="enter" type="button" value="點擊">
<div class="pop_mask" id="pop_mask"></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('#enter').on("click", function(){
$("#pop_mask").show();
$("#confirm_pop").show();
$("#btn_x").on("click", function(){
alert("NO");
$("#confirm_pop").hide();
$("#pop_mask").hide();
});
$("#btn_o").on("click", function(){
alert("yes");
$("#confirm_pop").hide();
$("#pop_mask").hide();
});
});
});
</script>
</body>
</html>
發(fā)現(xiàn)第一個問題：
【問題 1】我是用 “彈框div + mask div”的辦法做“模態(tài)彈框”的，方法是用 JQUERY 讓彈框/mask一起show、一起hide。<< 為了調(diào)試方便，我給每一個彈框按鈕（NO和YES）都加了alert()
這里出了個問題：第一次彈出后我按動按鈕，alert跳出一次、彈框和mask都hide; 第二次我再按動按鈕并點擊彈框里的按鈕，alert跳出兩次、彈框和mask--hide！第三次，則alert跳三次......
。。。。。。。。。。。。。?！贰贰? 求問原因
===============[part 2]================================
【問題 2】
然后，我懂了、需要用jquery生成DOM 再append到DOM中去，然后、每次點擊yes OR no之后，要remove這個彈框部分（.pop_wrap的div及其子div）！
so，繼續(xù)放代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>彈窗試驗</title>
<!-- Bootstrap -->
<link rel="stylesheet">
<style type="text/css">
.pop_wrap {
z-index: 1400;
width: 1360px;
position: absolute;
top: 150px;
display: none;
}
.pop_con {
width: 500px;
height: 200px;
margin: 0 auto 0;
background: #fafafa
}
.pop_p {
font-size: 20px;
margin-top: 50px;
text-align: center;
}
.pop_row {
margin-top: 50px;
}
.pop_btn {
text-align: center;
height: 30px;
}
.w_200 {
width: 200px;
}
.pop_mask {
z-index:1300;
position: absolute;
top:0px;
left:0px;
background:#000000;
opacity:0.5;
width:1920px;
height:2052px;
display: none;
}
</style>
</head>
<body>
<!-- <div class="pop_wrap" id="confirm_pop">
<div class="container pop_con">
<p class="pop_p">確定要取消么?</p>
<div class="row pop_row">
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button>
</div>
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">確定</button>
</div>
</div>
</div>
</div> -->
<input id="enter" type="button" value="點擊">
<div class="pop_mask" id="pop_mask"></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('#enter').on("click", function(){
$("#pop_mask").show();
var pop = $('<div class="pop_wrap" id="confirm_pop"><div class="container pop_con"><p class="pop_p">確定要取消么?</p><div class="row pop_row"><div class="col-xs-6 pop_btn"><button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button></div><div class="col-xs-6 pop_btn"><button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">確定</button></div></div></div></div>');
$('body').prepend(pop);
// $("#confirm_pop").show();
$("#btn_x").on("click", function(){
$("#confirm_pop").hide();
$("#pop_mask").remove();
});
$("#btn_o").on("click", function(){
$("#confirm_pop").hide();
$("#pop_mask").remove();
});
});
});
</script>
</body>
</html>
好了，這下彈框都不顯示了?。?....F12里面能看到，這個DOM已經(jīng)被加入到DOM了，但是鼠標hover在element代碼上，屏幕里面沒有任何高亮顯示的色塊，也就是 >>> 這個彈框的DOM、理論上存在，實際上不存在！.....
。。。。。。。。。。。。。?！贰贰? 求問原因
因為你給按鈕重復(fù)綁定了事件，所以點擊的次數(shù)越多，彈出的次數(shù)就越多
對于不是動態(tài)生成的dom元素，事件可以放到enter的click事件外面去綁定，對于動態(tài)生成的元素，可以用委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>彈窗試驗</title>
<!-- Bootstrap -->
<link rel="stylesheet">
<style type="text/css">
.pop_wrap {
z-index: 1400;
width: 1360px;
position: absolute;
top: 150px;
display: none;
}
.pop_con {
width: 500px;
height: 200px;
margin: 0 auto 0;
background: #fafafa
}
.pop_p {
font-size: 20px;
margin-top: 50px;
text-align: center;
}
.pop_row {
margin-top: 50px;
}
.pop_btn {
text-align: center;
height: 30px;
}
.w_200 {
width: 200px;
}
.pop_mask {
z-index:1300;
position: absolute;
top:0px;
left:0px;
background:#000000;
opacity:0.5;
width:1920px;
height:2052px;
display: none;
}
</style>
</head>
<body>
<div class="pop_wrap" id="confirm_pop">
<div class="container pop_con">
<p class="pop_p">確定要取消么?</p>
<div class="row pop_row">
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button>
</div>
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">確定</button>
</div>
</div>
</div>
</div>
<input id="enter" type="button" value="點擊">
<div class="pop_mask" id="pop_mask"></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('#enter').on("click", function(){
$("#pop_mask").show();
$("#confirm_pop").show();
});
$("body").on("click", "#btn_x" ,function(){
alert("NO");
$("#confirm_pop").hide();
$("#pop_mask").hide();
});
$("body").on("click", "#btn_o", function(){
alert("yes");
$("#confirm_pop").hide();
$("#pop_mask").hide();
});
});
</script>
</body>
</html>
第一個問題，姑且把它叫做嵌套注冊事件吧，就是你在注冊事件處理的時候，不要嵌套著去寫，你這個的問題就在于你把兩個需要hide的事件處理都寫進一個click里邊了，這樣相當于你每次click時、都會給相應(yīng)的DOM綁上一次事件處理，所以就會出你這樣的問題，就是因為你重復(fù)的綁了很多。這里你不要把這個on理解成是事件發(fā)生時要干嘛干嘛，這個on更像是一種事先約定，提前講好，如果事件發(fā)生了，那我跑一段function，但是你重復(fù)注冊當然就會跑上好幾次。
第二個問題，手機答題所以沒跑你的代碼，感覺你可以換成.append()方法再試試吧，HTML代碼里、越靠上層級越低。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達內(nèi)教育集團成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負責(zé)iOS教學(xué)及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多