javascript - 无法找到通过动态创建的项目获取用户输入的项目

Question

您好，我遇到以下问题，我有 3 个 div 通过 ajax 动态加载，如下所示:

<div class="item" id="item1">    // Dynamically loaded
    <input>
    <input>
</div>
<div class="item" id="item2">    // Dynamically loaded
    <input>
    <input>
</div>
<div class="item" id="item3">    // Dynamically loaded
    <input>
    <input>
</div>

$(document).on('change', '.item', function() {


});

我想要实现的是，当我对三个 div 之一的输入进行更改时，我想知道输入是在哪里提供的。因为元素是动态加载的，所以我无法使用直接选择器，但我必须使用 $(document).on 并且因为我不使用直接选择器，所以我无法使用 (此)。我如何查明哪些项目发生了更改？

提前致谢!

Answer 1

处理程序的第一个参数 - 例如 e - 如果声明了事件，则将接收该事件。然后，e 参数具有 target 属性，该属性为您提供事件起源的 HTML 元素。因此，这将为您提供对更改后的输入的引用:

$(document).on('change', '.item', function(e) {
    var targetInput = e.target;
    var parent = $(targetInput).closest("div.item");
    // Do something ...
});