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

Posted 2023-03-24

【中文标题】尝试将 EventListener 添加到动态创建的对象

【英文标题】：Trying to add EventListener to dynamically created object

【发布时间】：2020-02-18 10:41:26

【问题描述】：

我正在尝试从外部文件加载 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>

jQuery:

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

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

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

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

【问题讨论】：

您的动态元素的点击处理程序应该可以工作，前提是您必须在整个 DOM 中具有唯一 ID

所以您是说您的点击事件不适用于您动态添加的 div 或菜单？

id 是唯一的。确切地说，动态添加的元素不会触发点击事件。

动态 HTML 加载完成后需要重新初始化监听函数

@AravinthanK 不，你不知道。这就是委托事件处理程序的全部意义。

【参考方案1】：

如果您使用event delegation（您将事件侦听器设置在高级 DOM 对象，并让从该高级元素的死者触发的所有事件冒泡到高级元素，添加的任何新元素都将触发事件赶上更高。然后，在侦听器中，您可以检查哪个元素实际触发了事件并采取相应措施。因此，在您的情况下，从.on() 方法调用中删除id，然后检查event.target在侦听器内部：

// Set the event listener on a high level element and capture the event
$(document).on("click", function(event) 
    // You can find out what exact element triggered the event with event.target
    console.log("event triggered by: " + event.target);
    
    // Now you can proceed as you need to:
    if(event.target.id === "heading1")
      console.log("You clicked the heading");
     else if(event.target.id === "para1")
      console.log("You clicked the paragraph");
    
);


// Create new elements
let data1 = "<h1 id='heading1'>Some new data (click me)</h1>";
let data2 = "<p id='para1'>Some new data (click me)</p>";

// Dynamically add elements to document
$(document.body).append(data1);
$(document.body).append(data2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

这很有趣，正如我之前尝试过的那样，但如果我按下动态附加的元素，e.target 将返回主体或主体。就好像这些物体根本不存在一样。我会再试一次，看看我是否错过了什么。

问题仍然存在。记录 event.target 时，它总是返回 body 元素。完全忽略任何动态附加的元素。

@EpiX0R 好吧，肯定有其他事情发生了，而您没有显示出来，因为从这个示例中可以看出，这种方法确实有效。

具有讽刺意味的是，它一直是我的 CSS。出于某种原因，z-index: -1; 导致输入不可点击......对此感到抱歉，但感谢您花费的时间。我学到了很多东西。