Javascript jQuery：仅在第二次单击后触发动态单击事件

我创建了一个自定义表单，允许用户按名称查找某个特定选项，而不是在冗长的列表中搜索它——用于媒体浏览器。该代码符合我的要求，但有一个例外。单击动态添加的建议不会在您第一次单击它时触发单击事件

单击屏幕上的任何其他位置似乎会重置此设置，然后允许我单击我的选项并选择它。我不完全确定为什么会发生这种情况，但根据控制台输出，我的代码似乎在继续之前被卡住了

$（文档）.ready（函数（）{
//自定义选择表单
$（'select.custom_select'）。每个（函数（i）{
var select=$（此值）；
var custom_input=select.next（）.children（'input'）；
var delete_selection=custom_input.next（）；
var suggestion_list=delete_selection.next（）；
//在自定义表单中设置默认值
var selected=select.find（“：selected”）；
如果（选定。索引（）！=0）{
select.val（selected.val（））.change（）；
自定义_input.val（selected.text（））
自定义输入.attr（'readonly'，true）；
删除_selection.addClass（'option_selected'）；
}
//用户正在自定义表单中键入
自定义_input.on（“更改键控粘贴”，函数（）{
建议_list.empty（）；
console.log（“建议已清除”）；
建议列表css（‘可见性’、‘隐藏’）；
自定义_input.removeClass（'no_matches'）；
var user_input=custom_input.val（）；
如果（用户输入！=''）{
//向用户显示选项
选择.children（'option'）。每个（函数（i）{
let option=$（这是）；
var text=option.text（）；
if（text.toLowerCase（）.includes（user_input.toLowerCase（）））{
var re=new RegExp（“（“+user_input+”）”，“gi”）；
建议_list.append（`li data value=“${option.val（）}”数据名=“${text}”>${text.replace（re，'$1'）}`）；
console.log（“添加建议”）；
}
});
if（建议列表.children（）.length==0）{
自定义输入.addClass（'no_matches'）；
}如果（！custom_input.attr（'readonly'），则为else{
建议列表css（‘可见性’、‘可见’）；
建议列表。焦点（）；
}
}
});
//选择一个选项
建议列表（'click'，'li'，function（）{
select.val（parseInt（$（this.attr（'data-value'））.change（）；
自定义_input.val（$（this.attr（'data-name'））
自定义输入.attr（'readonly'，true）；
删除_selection.addClass（'option_selected'）；
建议列表css（‘可见性’、‘隐藏’）；
});
//重置自定义表单
删除所选内容。在（'单击'，函数（）上）{
选择.val（“”）.change（）；
自定义输入.attr（'readonly'，false）；
删除所选内容。删除类（“选项所选内容”）；
建议列表css（‘可见性’、‘可见’）；
自定义_input.focus（）；
});
});
});
。删除所选内容{
显示：无；
}
.选择的选项{
显示：首字母；
}

键入输入以获取建议。单击列表项以将其选中

---------
image.svg
video.mp4
game.iso
X


尝试更换：

custom_input.on("change keyup paste", function() { ... });

只要：

custom_input.on("keyup paste", function() { ... });

说明：绑定
change
也会在您离开过滤器输入时触发事件（当焦点不再在它上时）。由于相应的处理程序使用/修改建议列表，因此您对这些建议的单击事件可能会受到影响

还请注意，
input propertychange
是建议检查实际用户输入的两个事件，而不是
key*
事件。当用户粘贴某些内容时，它也会触发。所以你应该这样做：

custom_input.on('input propertychange', function() { ... });