Question

你好StackOverflow社区！

我面临一个挑战-在引导模态中加载索引树枝模板的新子级路由时，主script.js的事件未附加到模态中新加载的子级。

背景：假设我有一个twig模板（让我们称之为index.html.twig），它位于base_route下。在index.html.twig中，我具有链接到base_route子级编辑模板的元素列表。

要打开单个列表元素的特定路线（我们称其为edit.twig.html），我使用了引导模式，并在我放置的索引模板中的每个元素的定位标记中使用了

<a data-toggle="modal" data-target="#edit-child" class="btn btn-primary" data-href="{{ path('part_edit', { 'id': part.id }) }}"> Open </a>

现在，当我单击该锚标记后，通常每个元素都以模式加载。

但这是挑战-因为index.html.twig在页面加载时加载JS脚本（并在特定元素上附加事件），所以不附加模式弹出内容的事件，因为页面上尚不存在模式内容。由于负载优化，无法在页面加载时加载预填充的模式。

困扰我的是，我必须在edit.twig.html中有单独的JS事件。我想在主要scripts.js文件中包含这些JS事件-以便使一切井井有条。有什么方法可以在模式打开时再次加载主JS文件吗？还是在模式弹出窗口打开并加载子路由模板之后，还有其他更好的方法来附加主脚本文件中的事件吗？

谢谢！

Answer 1

正如@DarkBee指出的那样，您必须使用事件委托来处理这种事情。

如果我们在页面加载中不存在的元素上设置事件，则不会发生我们监听的事件。因此，我们必须将事件侦听器添加到父级。

在加载页面后加载所需元素时，我们将单击该元素（及其父元素），事件将冒泡。

然后，如果我们在父级上收听事件，则可以轻松检查event.target-这将为我们提供被点击的子级。然后，我们检查是否发生了所需的事件。在这两次检查之后，我们便可以轻松地运行某些功能。