在寫(xiě)一個(gè)項(xiàng)目，有一個(gè)觸發(fā)編輯按鈕才會(huì)出現(xiàn)編輯板塊，然后編輯板塊中有點(diǎn)擊添加的事件。當(dāng)保存編輯，編輯板塊消失。再次點(diǎn)擊編輯，再點(diǎn)擊添加，會(huì)觸發(fā)多次，生成多個(gè)模塊。
經(jīng)過(guò)多次反復(fù)痛苦的調(diào)試，發(fā)現(xiàn)是在點(diǎn)擊編輯后調(diào)用的函數(shù)中綁定了添加的事件，當(dāng)再次點(diǎn)擊編輯時(shí)，會(huì)重復(fù)綁定，所以會(huì)出現(xiàn)觸發(fā)多次的bug。
解決方法就是在綁定之前先解綁。
$('.u-edit-btn-box').off('click','#btnAdd').on('click','#btnAdd',function() {addInput();});
這樣就可以解決了。jquery中還有很多類(lèi)似的處理，比如說(shuō)運(yùn)行一個(gè)動(dòng)畫(huà)前先將之前的動(dòng)畫(huà)stop()掉。
不過(guò)在解綁事件時(shí)最好將具體的元素寫(xiě)入,因?yàn)樵谑录袝r(shí)，不寫(xiě)明具體，解綁會(huì)將所有事件解綁
<body>
<button class="btn1">綁定2和3事件</button>
<button class="btn2">2事件</button>
<button class="btn3">3事件</button>
</body>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$('body').on('click','.btn1',function() {
$('body').off().on('click','.btn2',function() {
alert(2);
});
$('body').off().on('click','.btn3',function() {
alert(3);
});
})
</script>
上述例子只會(huì)觸發(fā)alert（3），因?yàn)辄c(diǎn)擊btn1時(shí)，解綁了所有在body上的click事件，只會(huì)調(diào)用在最后綁定的alert（3）。
應(yīng)該寫(xiě)成
$('body').on('click','.btn1',function() {
$('body').off('click','.btn2').on('click','.btn2',function() {
alert(2);
});
$('body').off('click','.btn3').on('click','.btn3',function() {
alert(3);
});
})