jQuery绑定change事件返回jQuery.fn.init对象，如何获取输入值供代码调用？

问题原因 #

你第一种写法拿不到目标返回值有两个核心原因：

• jQuery的.on()方法本身返回的就是绑定了事件的jQuery对象，用来支持链式调用，你在事件回调函数里写的return值不会被.on()方法接收返回，所以$y自然就是你打印出来的jQuery实例
• 事件回调是异步执行的，你写console.log($y)的时候，change事件还没被用户触发，回调函数根本没运行，也不可能拿到当时的输入值

解决方案 #

方案1：外部变量存储（适合需要随时取最新值的场景） #

在事件外定义一个变量，事件触发时更新这个变量的值，后续其他代码直接取这个变量即可：

// 先定义外部变量存储值
let searchCityVal = '';
$('.search-city').on('change', function() {
    // 事件触发时更新变量，这里用$(this)可以避免重复查询DOM
    searchCityVal = $(this).val();
});

// 其他地方要使用的时候直接取变量即可，注意要确保change事件已触发才会有有效值
function otherLogic() {
    console.log(searchCityVal);
}

注意：不要在事件绑定后立刻取这个变量，此时事件还没触发，变量还是初始空值

方案2：回调函数传递（适合值变更后需要立即执行对应逻辑的场景） #

把依赖这个值的逻辑封装成函数，在change事件触发时直接把值作为参数传入执行，不需要额外维护全局变量：

$('.search-city').on('change', function() {
    const currentVal = $(this).val();
    // 直接调用依赖逻辑，传值进去
    handleCityChange(currentVal);
});

// 单独封装依赖该值的业务逻辑
function handleCityChange(val) {
    // 这里写所有需要用到该值的代码
    console.log(val);
    // 其他业务逻辑...
}

内容的提问来源于stack exchange，提问作者Touriă Ab