Javascript 单击事件失败时多次调用ajax jquery

当页面第一次加载时，它调用函数UpdateActionInfo（id），它传递隐藏在输入字段中的Viechleid并检查日期参数是否未定义，然后在页面第一次加载时发出ajax请求，但当我选择日期表单datepicker并单击按钮时，它失败，单击时服务器返回了json数据，但是在函数aka中再次执行了ajax.done（函数），但没有执行任何语句，因此不会再次渲染贴图

<script type="text/javascript" src="jquery.js"/>
<script type="text/javascript" src="jqueryui.js"/>
<h2>Tracks</h2>

轨道

隐藏的输入包含Vehicleid

<input type="hidden" id="Vehicleid" name="Vehicleid" value="1" />
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="row">             
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="text" id="datepicker" name="datepicker" class="form-control" />
                    </div>
                </div>
                <div class="col-md-4">
                    <input type="button" class="btn" id="btnsubmit" value="click"/>
                </div>  
        </div>
        <div class="row">
          <ul id="googleMaps" style="height:200px;" class="list-group"></ul>            
        </div>
    </div>
    <div class="col-md-2"></div>

</div>




<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script type="text/javascript">
    $(function () {

$（函数（）{

这个来自jqueryui的日期选择器，第一次页面加载时，它通过传递vehicleid来调用ajx，然后从datepicker中选择值并单击按钮，它生成另一个jquery ajax，但在这里它停止工作，json出现了，但没有执行JavaScript

        //$("#datepicker").datepicker();
        $("#datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            changeYear: true,
            changeMonth: true
        });
        var Vehicleid = $("#Vehicleid").val();

        $("#btnsubmit").on("click",function () {

            var dateInput = $("#datepicker").val();
            console.log(dateInput);


            updateAuctionInfo(Vehicleid, dateInput);
        });

        updateAuctionInfo(Vehicleid);
    });

this function get passe to render a track on google maps

    function ini(Zoom, trackPoints, elementID) {
        var centerX = ((trackPoints[trackPoints.length - 1].lat() - trackPoints[0].lat()) / 2) + trackPoints[0].lat();
        var centerY = ((trackPoints[trackPoints.length - 1].lng() - trackPoints[0].lng()) / 2) + trackPoints[0].lng();

        var myCenter = new google.maps.LatLng(centerX, centerY)

        console.log("from insdie the fucntion " + trackPoints[0].lat());
        var mapProp = {
            center: myCenter,
            zoom: Zoom,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById(elementID), mapProp);

        var flightPath = new google.maps.Polyline({
            path: trackPoints,
            strokeColor: "#0000FF",
            strokeOpacity: 0.8,
            strokeWeight: 2
        });

        var marker = new google.maps.Marker({
            position: trackPoints[0],
            title: 'Click to zoom'
        });

        var marker2 = new google.maps.Marker({
            position: trackPoints[trackPoints.length - 1],
            title: 'Click to zoom'
        });

        flightPath.setMap(map);
        marker.setMap(map);
        marker2.setMap(map);

    }
    function updateAuctionInfo(id, date) {

        if (typeof date === 'undefined') {
            date = "2010-10-05";

        };
        $.ajax({
            url: "/Vehicle/Points/" + id + "?date=" + date,async :false
        }).done(function (result) {
            function aka() {
                var numtracks = result.Tracks.length;
                var arr = [];
                if (numtracks == 0) { alert("9"); }
                console.log("Tracks lenght : " + numtracks);


                for (var i = 0; i < numtracks; i++) {
                    var numPoints = result.Tracks[i].trackPoints.length;
                    var elmID = "map" + i; //ID for maps
                    console.log(elmID);

                    arr[i] = [];
                    console.log("*********Array number " + i + " Got created" + "and its lenght is " + arr[i].length + "   *******************");
                    console.log("Lenght of track #" + i + " Points => " + numPoints);
                    $("#googleMaps").append('<li id="map' + i + '" style="height:100%;" class="list-group-item"></li><br/>');


                    for (var j = 0; j < result.Tracks[i].trackPoints.length; j++) {
                        var x = result.Tracks[i].trackPoints[j].lat;
                        var y = result.Tracks[i].trackPoints[j].lng;
                        console.log("x= " + x + " for #" + j + "  Point");
                        console.log("y= " + y + "  for #" + j + "  Point");
                        var p = new google.maps.LatLng(x, y);
                        console.log("p befor push lat for the " + p.lat());
                        console.log("p befor push lng for the " + p.lng());
                        arr[i][j] = p;
                        console.log("x => " + arr[i][j].lat());
                        console.log("x => " + arr[i][j].lat());
                        console.log("track #" + i + " , point #" + j + " pushed into array x= " + arr[i][j].lat() + " ,y=" + arr[i][j].lng());
                        console.log(" array Length is " + arr[i].length);
                    }
                    // console.log(" array Length is #"+i +" =>"+ arr[i].length);
                    ini(14, arr[i], elmID);
                }
            }

            google.maps.event.addDomListener(window, 'load', aka);
        }
            );
    }


</script>

/$（“#日期选择器”）.datepicker（）；
$（“#日期选择器”）。日期选择器({
日期格式：“年月日”，
变化年：是的，
变化月：对
});
var Vehicleid=$（“#Vehicleid”）.val（）；
$（“#btnsupmit”）。在（“单击”，函数（）{
var dateInput=$（“#日期选择器”）.val（）；
console.log（日期输入）；
UpdateActionInfo（车辆ID、日期输入）；
});
更新操作信息（车辆ID）；
});
此函数用于在google maps上渲染轨迹
函数ini（缩放、轨迹点、元素ID）{
var centerX=（（轨迹点[trackPoints.length-1].lat（）-trackPoints[0].lat（））/2）+轨迹点[0].lat（）；
var centerY=（（轨迹点[trackPoints.length-1].lng（）-轨迹点[0].lng（））/2）+轨迹点[0].lng（）；
var myCenter=new google.maps.LatLng（centerX，centerY）
console.log（“来自函数内部”+轨迹点[0].lat（））；
var mapProp={
中心：迈森特，
缩放：缩放，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（elementID），mapProp）；
var flightPath=new google.maps.Polyline({
路径：轨迹点，
strokeColor:#0000FF“，
笔划不透明度：0.8，
冲程重量：2
});
var marker=new google.maps.marker({
位置：轨迹点[0]，
标题：“单击以缩放”
});
var marker2=新的google.maps.Marker({
位置：轨迹点[trackPoints.length-1]，
标题：“单击以缩放”
});
flightPath.setMap（map）；
marker.setMap（map）；
marker2.setMap（map）；
}
函数updateActionInfo（id，日期）{
如果（日期类型==‘未定义’）{
日期=“2010-10-05”；
};
$.ajax({
url:“/Vehicle/Points/”+id+“？date=“+date，异步：false
}).完成（功能（结果）{
函数aka（）{
var numtrack=result.Tracks.length；
var-arr=[]；
如果（numtrack==0）{alert（“9”）；}
控制台日志（“轨道长度：+numtrack”）；
对于（变量i=0；i”+numPoints）；
$（“#谷歌地图”）.append（“

”）；
对于（var j=0；j”+arr[i][j].lat（））；
log（“x=>”+arr[i][j].lat（））；
console.log（“track#“+i+”，point#“+j+”推入数组x=“+arr[i][j].lat（）+”，y=“+arr[i][j].lng（））；
log（“数组长度为”+arr[i].Length）；
}
//log（“数组长度为#“+i+”=>“+arr[i].Length”）；
ini（14，arr[i]，elmID）；
}
}
google.maps.event.addDomListener（窗口'load'，aka）；
}
);
}

根据我的理解，在得到JSON响应后，您还必须更新DOM。因此，在updateActionInfo（）之后，您必须进行如下ajax调用。以下是相同的模板：

函数updateActionInfo（auctionId）{
$.ajax({
url:“/Auctions/JsonAuction/”+auctionId，
成功：功能（结果）{
$（'#Title'）.val（result.Title）；
$（'#Description'）.val（result.Description）；
$（'#CurrentPrice'）.html（result.CurrentPrice）；
}
});
}