jQuery .on('keyup')仅触发一次 输入新邮编无法更新城市州问题求助

你的事件绑定本身没有问题，不会出现调用一次就失效的情况，触发逻辑被拦截的核心原因是：

• 你在AJAX请求的前置判断里加了城市、州字段为空的限制条件，第一次请求成功给两个字段赋值后，后续修改邮编时，这个条件不再满足，自然不会发起请求更新字段。
• 额外优化点：keyup事件无法覆盖粘贴、输入法选字等邮编输入场景，且输入过程中会高频触发请求，建议替换为input事件加防抖逻辑。

方案1：每次邮编变更都更新城市、州（允许覆盖已有值） #

直接去掉空值判断即可，同时补充防抖、错误处理优化，代码如下：

// 防抖函数，避免输入过程中频繁发请求
let zipDebounceTimer = null;
$(".zipfield").on("input", function(){
    const $this = $(this);
    const $addressBlock = $this.closest(".addressBlock");
    const city = $addressBlock.find(".cityfield");
    const state = $addressBlock.find(".statefield");
    const zipVal = $this.val().trim();

    // 清空之前的防抖计时器
    clearTimeout(zipDebounceTimer);
    
    if (zipVal === "") return;

    // 输入停止300ms后再发请求
    zipDebounceTimer = setTimeout(() => {
        $.ajax({
            method: "POST",
            url: "<?= $this->baseUrl();?>/search/zip",
            data: {zip: zipVal},
            success: function (data) {
                // 这里如果后端返回的是JSON，可以直接加dataType: 'json'不用自己parse
                if (typeof data === 'string') data = JSON.parse(data);
                if (data.status === "OK") {
                    city.val(data.city);
                    state.val(data.state);
                }
            },
            error: function () {
                // 接口报错时可以加提示逻辑，比如提示邮编无效
            }
        });
    }, 300);
});

方案2：保留「用户手动填过城市/州就不自动覆盖」逻辑 #

如果你的需求是只有用户没手动填过城市、州的时候才用邮编自动填充，那么可以给字段加标记位判断是否是用户手动输入的：

let zipDebounceTimer = null;
// 监听城市、州字段的手动输入，加标记
$(".cityfield, .statefield").on("input", function() {
    $(this).data('user-filled', true);
});

$(".zipfield").on("input", function(){
    const $this = $(this);
    const $addressBlock = $this.closest(".addressBlock");
    const city = $addressBlock.find(".cityfield");
    const state = $addressBlock.find(".statefield");
    const zipVal = $this.val().trim();

    clearTimeout(zipDebounceTimer);
    if (zipVal === "") return;

    // 只有两个字段都不是用户手动填写的，才发起自动填充请求
    if (city.data('user-filled') || state.data('user-filled')) return;

    zipDebounceTimer = setTimeout(() => {
        $.ajax({
            method: "POST",
            url: "<?= $this->baseUrl();?>/search/zip",
            data: {zip: zipVal},
            dataType: 'json',
            success: function (data) {
                if (data.status === "OK") {
                    city.val(data.city);
                    state.val(data.state);
                }
            }
        });
    }, 300);
});

两种方案都可以解决触发一次就失效的问题，根据你的业务需求选择即可。

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