jQuery：如何在ajax请求调用内获取input输入框的用户输入值？

你遇到的绑定不生效问题通常是以下两个原因导致的：

• AJAX请求执行时，#my_input元素还没渲染到DOM树中，jQuery选择器找不到对应元素，事件绑定自然无效。常见于JS代码写在<head>标签内、没有监听DOM加载完成事件的场景。
• AJAX请求本身加载CSV失败，success回调从未执行，事件绑定代码从来没运行过。你没有配置error回调，所以看不到报错信息。

最优方案（推荐）：使用事件委托 + 全局存储CSV数据 #

该方案不需要把事件绑定写在AJAX回调内，也不会受DOM渲染时机、AJAX请求时机的影响，同时还能保留异步请求的性能优势，避免async: false阻塞页面渲染的问题。

// 定义上层作用域变量存储加载完成的CSV数据
let csvData = null;

// 直接绑定事件到document，用事件委托监听输入框的keyup事件
$(document).on('keyup', '#my_input', function () {
  // CSV未加载完成时跳过计算逻辑
  if (!csvData) return;
  // 此处写你的计算逻辑，直接调用csvData即可
  console.log(this.value);
});

$.ajax({
  url: csv_url,
  dataType: "text",
  success: function (csvd) {
    csvData = $.csv.toObjects(csvd);
    // 其余填充页面字段的逻辑保留在此处
  },
  error: function (xhr, status, error) {
    console.error('CSV加载失败，错误信息：', error);
  }
});

兼容原有写法的修复方案 #

如果你要保留原来把绑定写在success回调里的逻辑，需要先保证DOM加载完成后再执行AJAX代码，同时增加错误回调排查加载问题：

// 所有逻辑包在DOM加载完成的回调内
$(document).ready(function () {
  $.ajax({
    url: csv_url,
    async: false,
    success: function (csvd) {
      var csv = $.csv.toObjects(csvd);
      // 此处可加日志验证是否能选到元素：console.log($("#my_input").length)
      $("#my_input").keyup(function () {
          console.log(this.value);
      });
    },
    error: function (err) {
      console.error('AJAX请求失败：', err);
    },
    dataType: "text"
  });
});

注意：async: false是同步请求，会阻塞整个页面的渲染和交互，直到请求完成，用户体验极差，目前主流浏览器也在逐步废弃对同步XHR的支持，不建议使用。

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