Javascript 键控功能仅对输入的第一个字母起作用一次

我有一个文本输入，用户在其中输入所需的页面名称

<input type='text' id='pageName'  name='PageName' class='form-control pageName'>

如果我添加

console.log（html）它在日志中正确显示值，但
$（“#NotAllowed”）。替换为（数据）仅显示第一个字母或2（如果我打字快！）

我遗漏了什么？
您应该将keyup函数包装在一个文件中。这将在从服务器请求数据时为您节省一些时间和负载


const debounce=（回调，等待）=>{
让timeoutId=null；
返回（…参数）=>{
常量[{target}]=args；
clearTimeout（timeoutId）；
timeoutId=window.setTimeout（（）=>{
callback.apply（目标，参数）；
}，等等）；
};
}
const handleKeyUp=debounce（函数（）{
$（“#加载程序图像”）.show（）；
$.ajax({
键入：“GET”，
async:false，
url:'CheckPageName.php'，
数据：{'PageName'：$（this.val（）}，
cache:false，
成功：函数（数据、文本状态、jqXHR）{
$（“#不允许”）.html（数据）；
$（“#加载程序图像”）.hide（）；
},
错误：函数（jqXHR、textStatus、errorshown）{
$（“#不允许”）.html（“未找到…”
）；
//在1秒后隐藏遮罩，以模拟等待响应
//连接响应后删除此超时
setTimeout（函数（）{
$（“#加载程序图像”）.hide（）；
}, 1000);
}
});
}, 250); // 停止键入后，仅在250毫秒后搜索
$（“#加载程序图像”）.hide（）；
$（“#页面名称”）。在（'keyup'，handleKeyUp）上
#加载程序映像{
显示器：flex；
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
保证金：0；
填充：0；
z指数：999；
背景：rgba（0,0,0,0.5）；
证明内容：中心；
对齐项目：居中；
字体大小：粗体；
}

搜索现有页面名称
检查现有页面。

加载…
这个问题与AJAX调用无关（尽管
async:false
仍然是不必要的，而且通常是不好的做法）

问题在于jQuery函数的作用。根据文档，它会删除匹配的元素，并用您提供给函数的内容替换整个元素。请注意，它将替换整个元素，而不仅仅是其内部内容

因此，它只工作一次的原因很简单，因为在第一次执行之后，“NotAllowed”元素不再存在-replaceWith已将其删除，并将其替换为来自AJAX请求的响应

如果要在不删除元素的情况下更新元素的内容，可以在jQuery中使用
.html（）
或
.text（）
（取决于内容是html还是纯文本）。在这种情况下，
.text（）
可以：

success: function(response) {
    $("#NotAllowed").text(response);
    $('#loader_image').hide();
}

Demo:
async:false
可能是罪魁祸首，因为这会在AJAX请求发生时阻止浏览器中发生任何其他事件（包括JS事件）。这是没有必要的，只会引起问题。我的第一个建议是删除该选项并重试。
$（“#NotAllowed”）
和
$（“#loader_image”）
元素在哪里？
是否位于
#NotAllowed
元素内？浏览器控制台中是否存在任何错误/警告？您在网络工具中看到了什么？只是AJAX调用的一个实例，听起来像您描述的那样？有没有后续的失败案例，或者什么都没有？您是否添加了任何控制台日志记录来查看keyup事件被触发了多少次？到目前为止，调试的基础似乎有点薄弱。因为我刚刚复制了这个，并且能够在不复制错误的情况下执行，所以肯定还涉及到其他方面。您还可以粘贴可能相关的任何其他页面代码。jquery的哪个版本？您还包括哪些可能存在冲突的库？确定吗？这很奇怪…而且使用您显示的代码也无法复制-演示：
success: function(response) {
    $("#NotAllowed").text(response);
    $('#loader_image').hide();
}