在提交javascript / php后选中复选框时调用ajax

Question

我有四个这样的文件。用户单击文件 interactive-map.php 中的提交按钮。然后，数据通过javascript文件 overview.js 和 overview-statistic.js 传递到 statesearch.php 。然后我希望能够点击复选框，这将调用将进行ajax调用的construtor。问题始于文件 overview.js ，表示我在调用状态0 后出错。我知道这意味着在ajax调用之后页面会刷新。我查看其他解决方案How to stop refreshing page after ajax call?，但问题在执行event.preventDefault()后不会消失。我不明白为什么。

交互式map.php

<form action="statesearch.php" class="post" id="post" method="get">
    <input class="stateAttr" name="stateAttr" type="hidden" value=data[stateAttr]>
    <input class="counties" name="counties"type="hidden" value=data[county]>
    <input class="river" name="rivers" type="hidden" value=data[river]>
    <input class="city" name="cities" type="hidden" value=data[city]>
    <input id="submit" type="submit">
</form>

statesearch.php

<script src="overview.js"></script>
<script src='overview-statistic.js'></script>
...
<?php
    if (isset($_GET["data"])) {
        $stateAttr = str_replace("\"", "" ,$_GET["data"]["stateAttr"]);
        $cities = str_replace("\"", "" , $_GET["data"]["cities"]);
        $counties = str_replace("\"", "" , $_GET["data"]["counties"]);
        $rivers = str_replace("\"", "", $_GET["data"]["rivers"]);
    }
    ....
    <div class='cities-display'>
        <p><label><input class='city-checkbox0'  type='checkbox'</label>city1</p>
        <p><label><input class='city-checkbox1' type='checkbox'</label>city2</p>
        <p><label><input class='city-checkbox2' type='checkbox'</label>city3</p>
        ...
    </div>
?>

overview.js

$(document).ready(function () {
    $(".cities-display input[type=checkbox]").on("change", function (event) {      
        if (this.checked) {
            city = $(this).closest("p").text();
            address = city + ', USA';
            var graphDemo = new GetStat(city); //<-- Problem here. Call from overview-statistic.js
                ...
        }
        else {
            deleteMark($(this).closest("div").index());      // Call from map-animate.js
        }
    });
}

概述-statistic.js

function GetStat(input) {
    ...
    this.input = input;
    this.getEntity();
}

GetStat.prototype = {
    getEntity: function () {
        var self = this;
        // Look up entity
        $.ajax({
            url: "https://api.opendatanetwork.com/entity/v1?entity_name="+this.input+", CA&entity_type=region.place&app_token="+this.apiKey,
            type: "GET",
            success: function (data) {
                var entity_id = data["entities"][0]["id"].toString();
                self.entity = entity_id;
                self.getDemo(entity_id);
                self.getEdu(entity_id);
                self.getJob(entity_id);
            },
            error: function(xhr) {
                var response = xhr.responseText;
                console.log(response);
                var statusMessage = xhr.status + ' ' + xhr.statusText;
                var message  = 'Query failed, php script returned this status: ';
                var message = message + statusMessage + ' response: ' + response;
                alert(message);
            }
        })    
    }
    ....
}