Javascript 尝试将EventListener添加到动态创建的对象

我正在尝试从外部文件加载HTML。但是，这样做时，输入元素是不可交互的。我尝试过使用香草JavaScript，但没有效果，只是导入了jQuery。我目前的进展如下：

我有一个带有静态元素和菜单栏的页面。单击菜单栏图标时，元素内容将通过JS/JQ更新。这是用于加载视图的HTML和jQuery：

settings.html：

<section class="settings">
<div class="container">
    # some elements here

    <div id="graph-settings" class="settings-card">
        <i class="fa fa-chart-line fa-3x"></i><h1>Graph Settings</h1>
        <p>Web Interface Refresh Rate</p>
        <form>
            <input type="text" name="graphInterval" id="graphInterval" placeholder="E.g. 2000">
        </form>
    </div>

    # more elements here
</div>
</section>

内容似乎已正确加载到页面中，但不可标记/交互（动态添加到DOM等）。但是，我的jQuery似乎没有找到#graphInterval元素，因为我没有从控制台获得记录的输出

任何让输入字段工作的方法都是一个解决方案。它们所需要的只是编辑和检索它的值。稍后我将使用JavaScript添加按钮/与按钮交互，不会使用发布表单，因此表单没有“action=”。

如果使用（如果您将事件侦听器设置为高级DOM对象，并让从该高级元素的死者触发的所有事件冒泡到该高级元素，则添加的任何新元素都将触发更高级别的事件。然后，在侦听器中，您可以检查哪个元素实际触发了事件，并相应地采取行动。因此，在y中在我们的例子中，从

.on（）

方法调用中删除

id

，然后检查侦听器内部：

//在高级元素上设置事件侦听器并捕获事件
$（文档）。在（“单击”）上，函数（事件）{
//您可以使用event.target找出触发事件的确切元素
console.log（“由“+event.target”触发的事件）；
//现在，您可以根据需要继续：
如果（event.target.id==“heading1”）{
log（“您单击了标题”）；
}else if（event.target.id==“para1”）{
log（“你点击了段落”）；
}
});
//创造新元素
let data1=“一些新数据（单击我）”；
让data2=“
一些新数据（单击我）
”；
//向文档动态添加元素
$（document.body）.append（data1）；
$（document.body）.append（data2）；

---

如果在整个DOM中必须具有唯一的id，则动态元素的单击处理程序应该可以工作。因此，您是说您的单击事件不适用于动态添加的div或菜单？id是唯一的。确切地说，对于动态添加的元素，单击事件不会触发。您必须重新初始化侦听器创建动态HTML后的操作loaded@AravinthanK不，你没有。这就是委托事件处理程序的全部要点。这很有趣，正如我之前尝试过的，但是如果我按下动态附加的元素，e.target将返回主体或主体。它的行为就像对象根本不存在一样。我将重试并查看如果我遗漏了什么，问题仍然存在。在记录event.target时，它总是返回body元素。完全忽略任何动态附加的元素。@EpiX0R好吧，一定还有其他事情发生了，你没有显示出来，因为从这个示例中可以看出，这种方法确实有效。讽刺的是，它一直都是我的CSS。由于某种原因，

z-index:-1；

导致输入无法单击…对此表示抱歉，但感谢您花费的时间。我学到了很多。

$.get("./pages/settings.html", (data) => {
    $("#main").append(data);
});

$(document).on("click", "#graphInterval", function() {
    // do something...
    console.log("test");
});