有關js事件的綁定和解綁

事出：作了一個省市縣三級聯動。可是在請求三級的時候，都是請求屢次； 源代碼：

function initCities(pro) {
	var prCode = "";
	if(pro==undefined){
		prCode =$("#provinces").val();
	}else{
		prCode = pro;
	}
    $('#cities').empty();
    $('#areas').empty();
    $('#cities').append($("<option selected='selected'  value=''>所有</option><br>"));
    $.ajax({
        type : "POST",
        url : ctx + "code/getCitiesByProCode?prCode=" + prCode,
        success : function(data) {
            $.each(data.data, function(i, it) {
                $("<option value='" + it.cityCode + "'>"
                    + it.cityName + "</option><br>").appendTo($('#cities'));
            });
            $("#cities").val( $("#_cities").val());
            //注意就是這裏的change事件，每次請求都綁定一個change事件，屢次請求後
            //該事物綁定了多個change時間，所以會一次改變觸發多個initAreas()方法
            $('#cities').change(function(){
            	initAreas();
            });
        }
   });
}

解決：解決改問題，只須要在給事物綁定事件前解綁全部的事件便可 代碼：

function initCities(pro) {
	var prCode = "";
	if(pro==undefined){
		prCode =$("#provinces").val();
	}else{
		prCode = pro;
	}
    $('#cities').empty();
    $('#areas').empty();
    $('#cities').append($("<option selected='selected'  value=''>所有</option><br>"));
    $.ajax({
        type : "POST",
        url : ctx + "code/getCitiesByProCode?prCode=" + prCode,
        success : function(data) {
            $.each(data.data, function(i, it) {
                $("<option value='" + it.cityCode + "'>"
                    + it.cityName + "</option><br>").appendTo($('#cities'));
            });
            $("#cities").val( $("#_cities").val());
            //這裏的操做是在給事物綁定事件以前，先解綁該事物綁定的全部事件，而後在給事物從新綁定一
            //個事件，這樣就避免出現重複請求的狀況發生
            $('#cities').unbind().change(function(){
            	initAreas();
            });
        }
   });
}

結束