jQuery.on()无法捕获新的附加数据

Question

我正在尝试获取最近被.append()到HTML的输入框的值。输入框不正常存在。它通过一个函数点击CCD_ 2按钮。

输入的值应该被捕获并通过jQueryAjax发送到后端(php(。

附加输入字段的函数：

function toggleOrder(){
$(".orderContainer").append(`
<div class="orderFilterBox">
<input id="orderFilterInput" type="text" placeHolder="Enter IMEI">
</div>
`);
}

捕获输入值并将其发送到后端的功能

$(document).ready(function(){
$("#orderFilterInput").on("change paste",function(){
//DO THE MAGIC
//...
});
});

我相信存在的问题是页面上的代码加载了不存在输入的地方。我不知道该怎么避免。

此外，如果你想建议一个更好的问题标题来帮助其他人，那么请选择

Answer 1

如果使用.on，则需要关注页面加载中存在的静态元素。如果orderFilterInput不存在，则orderFilterInput.on不正确。

你可以试试

$(document).on("ready", function(){
$("body").on("change paste","#orderFilterInput", function(){
//DO THE MAGIC
//...
});
}); 

或者，您可以通过在追加函数中使用事件的jquery来制作追加按钮。

const btn = $('<input id="orderFilterInput" type="text" placeHolder="Enter IMEI">')
.on('copy paste', function() { .. });
$container.append(btn);

Answer 2

事件处理程序仅绑定到当前选定的元素；他们必须在代码调用.on((时存在元素存在并且可以选择，将脚本放置在HTML标记中的元素或在文档中执行事件绑定准备好的处理程序。或者，使用委托的事件处理程序附加事件处理程序。

委托的事件处理程序具有可以处理的优势在稍后。通过选择保证存在于附加委托的事件处理程序时，可以使用委派的事件处理程序，以避免频繁附加和删除事件处理程序。此元素可以是的容器元素例如，模型视图控制器设计中的视图，或者如果事件处理程序希望监视文件文档元素位于文档之前加载任何其他HTML，因此可以安全地附加事件而无需等待文档准备就绪。

以下是api引用：https://api.jquery.com/on/，因此，根据@daremachine的建议，您需要使用委托的事件处理程序作为：

$(document).on("change paste","#orderFilterInput", function(){
//DO THE MAGIC
//...
});