jQuery动态追加的input无法用.on()捕获值的问题求助

你完全猜对了！问题的核心就是页面初始化时这个input元素还不存在——你在$(document).ready()里直接绑定事件，此时DOM里根本找不到#orderFilterInput，所以事件绑定自然无效。

解决方案：使用jQuery事件委托 #

jQuery的事件委托机制专门解决这类动态元素的事件绑定问题。它的原理是把事件绑定到一个已经存在的父级元素（或者document）上，然后通过选择器筛选出真正触发事件的目标元素，这样哪怕元素是后来动态添加的，事件也能被正常捕获。

修改后的完整代码示例 #

// 绑定事件到已存在的父元素.orderContainer
$(document).ready(function(){
  $(".orderContainer").on("change paste", "#orderFilterInput", function(){
    // 获取当前input的输入值
    const inputVal = $(this).val();
    
    // 发送Ajax请求到PHP后端
    $.ajax({
      url: "your-backend.php", // 替换成你的实际PHP接口地址
      method: "POST",
      data: { imei: inputVal },
      success: function(res){
        // 请求成功后的处理逻辑
        console.log("后端返回结果：", res);
      },
      error: function(xhr, err){
        // 请求失败的处理逻辑
        console.error("请求出错：", err);
      }
    });
  });
});

几个实用小贴士 #

• 优先选择就近的父元素：尽量绑定到离目标元素最近的已存在父元素（比如这里的.orderContainer），而不是直接绑定到document，这样能减少事件冒泡带来的性能开销。
• 更全面的输入事件监听：如果需要实时捕获所有输入行为（包括键盘输入、粘贴、剪切等），可以把事件类型改成"input"，它能覆盖change、paste、keyup等多种场景，更省心。
• 避免重复追加元素：注意你的toggleOrder()函数每次点击都会追加一个新的.orderFilterBox，如果多次点击会生成多个#orderFilterInput（ID重复不符合HTML规范），建议改成动态生成唯一ID，或者在追加前先移除已存在的元素，比如：

  function toggleOrder(){
    // 先移除已存在的输入框，避免重复
    $(".orderFilterBox").remove();
    $(".orderContainer").append(`
      <div class="orderFilterBox">
        <input id="orderFilterInput" type="text" placeholder="Enter IMEI">
      </div>
    `);
  }
  

优化后的问题标题（方便他人搜索） #

jQuery无法为动态append的input元素绑定change/paste事件，如何获取其值并通过Ajax发送？

内容的提问来源于stack exchange，提问作者xDw.Co