js 點擊事件 內部的 另一個點擊事件重複

我們寫頁面交互的時候，有時候會遇到JS點擊事件內部嵌套另外一個點擊事件，這種情況下，當我們多次觸發外部的點擊時間時，內部的點擊事件會進行一個緩存，當觸發內部的點擊事件時會發現重複的情況。

例如：

<div id="d1" class="d1" style="width: 100px;height: 100px; background: #CCCCCC">
    <button id="btn">點我</button>
</div>
<div class="d1" style="width: 100px;height: 100px; background: #aaaaaa;margin-top: 20px;">
</div>
<script src="js/jquery.2.1.1.min.js"></script>
<script>
    $('.d1').click(function(){
        var index=$(this).index();
        console.log(index)
        if(index==0){

        }else if(index==1){
            $("#btn").click(function(){
                console.log('內部事件觸發')
            })
        }
    })
</script>

這個時候重複點擊外部的父級div：#d1，再點擊裏面的按鈕就會出現重複現象，明明只點擊一次，卻多次觸發。

這個時候需要對內部事件先進行一個解綁，

$("#btn").unbind('click').click(function(){
                console.log('內部事件觸發')
            })

或者：

$("#btn").off().click(function(){
                console.log('內部事件觸發')
            })

這樣就不會重複觸發事件了。