有关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();
            });
        }
   });
}

结束