javascript - 点击事件失败时多次调用ajax jquery

Question

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

<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 () {

这个来自jquery ui的日期选择器，第一次页面加载时，它只需传递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>

Answer 1

根据我的理解，在收到 JSON 响应后，您也必须更新 DOM。因此，在 updateAuctionInfo() 之后，您必须进行 ajax 调用，如下所示。这是相同的模板:

function updateAuctionInfo(auctionId) {
$.ajax({
url: "/Auctions/JsonAuction/" + auctionId,
success: function (result) {
$('#Title').val(result.Title);
$('#Description').val(result.Description);
$('#CurrentPrice').html(result.CurrentPrice);
}
});
}