AJAX表单首次提交后无法重新提交的问题求助

我尝试在点击事件中添加和不添加e.PreventDefault()，但问题依然存在。我还试过把之前选择的位置存储在隐藏输入字段savedLoc中，但也没解决问题。

表单HTML代码 #

<form id="cityfilter" method="GET">                 
    <div class="col-xs-12 col-md-offset-1 col-md-5" >
            <input autocomplete="off" id="location" type="text" class="form-control center-block" placeholder="Filter By Town / City" style="height:40px;margin-bottom:5px;">
            <div id="suggest"></div>
    </div>
    <div class="col-xs-12 col-md-4" >
        <select class="form-control" style="height:40px;margin-bottom:5px;" id="selectDistance">
        <option disabled>Distance</option>
        <option value="5">5 Miles</option>
        <option value="10">10 Miles</option>
        <option value="15">15 Miles</option>
        <option value="20">20 Miles</option>
        <option value="25">25 Miles</option>
        <option value="35">35 Miles</option>
        <option value="50">50 Miles</option>
        <option value="75">75 Miles</option>
        <option value="100">100 Miles</option>
        <option value="250">250 Miles</option>
        </select>
    </div>
    <button type="button" class="btn btn-lg pinkbtn" style="height:40px;color:white" id="addfilter">
        <i class="fa-solid fa-fw fa-lg fa-magnifying-glass"></i>
    </button>
    <input type="hidden" name="savedLoc" id="savedLoc" <?php if(isset($preset)){ echo 'value="'.$preset.'"';}?>>
</form>

AJAX及jQuery代码 #

$(document).ready(function() {
    $("#location").keyup(function() {
        $.ajax({
            type: "POST",
            url: "https://example.com/citylist.php",
            data: 'name=' + $(this).val(),
            beforeSend: function() {
                $("#location").css("background-color", "#FFF 165px");
            },
            success: function(data) {
                $("#suggest").show();
                $("#suggest").html(data);
                $("#location").css("background", "#FFF");
            }
        });
    });
});
var loc = '';
function selectCity(val) {
    $("#location").val(val);
    $("#savedLoc").val(val);
    var loc = $("#location").val();
    $("#suggest").hide();
}
$('#addfilter').click(function()
{
    console.log('Location : '+$("#savedLoc").val());
    var distance = $("#selectDistance").val();
    $('#cityfilter').attr('action', '<?php echo $catbase;?>/'+$("#savedLoc").val()+'/'+distance).submit();
});

问题现象与期望效果 #

• 表单首次提交正常，偶尔修改距离下拉框后第二次提交有效，但最多只能提交两次。
• 期望实现：当位置已定义时，直接使用更新后的距离值进行搜索。

内容的提问来源于stack exchange，提问作者ChrisYates