Question

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

Answer 1

如果您使用event delegation（将事件侦听器设置在高级DOM对象上，并让从该高级元素的后代触发的所有事件冒泡到高级元素，则添加的任何新元素都会触发更高级别的事件。然后，在侦听器中，您可以检查哪个元素真正触发了该事件并采取相应的措施。因此，在这种情况下，请从id方法调用中删除.on()并然后在监听器中检查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>

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

1 个答案: