JavaScript 在 DIV 的加载内容中不能很好地工作

JavaScript does not work well inside a loaded content in a DIV

本文关键字：不能 很好 工作 DIV 加载 JavaScript      更新时间：2023-09-26

我正在使用Symfony2创建一个应用程序，其中我有一个选项主菜单，根据所选的选项动态打开一个较低div选项卡，其中包含该选项的内容。内容在容器div中加载了 Jquery 的load()。您可以在下图中看到：

第一个问题是在每个选项卡中加载的HTML中无法使用最初加载在index.html中的js文件，正如您在此示例中看到的那样，当我们单击每个选项卡的内容时，您应该查看通知，但什么也不做。

此问题的解决方案包含在每个HTML代码中以加载适当的脚本，并且它工作正常。但是要做到这一点，如果两个 HTML 携带相同的 js，当某个事件运行的内容之一重复多次作为我们创建的选项卡时，也就是说，如果我打开两个不同的选项（每个在自己的选项卡中都收取相同的 js）通过单击第一个关联的事件执行两次， 而如果我在第二个只做一次。简而言之，每当使用js的函数时，重复的次数与选项卡上动态加载的次数一样多。

我尝试了event.preventDefault();或event.stopPropagation();，但它不能解决问题。

在

HTML的整体结构中包含两次js可以吗？（包含在初始头中，然后包含在容器div 中）

动态加载HTML + JavaScript不是这种情况的最佳方法。我建议你使用一些JavaScript SPA框架，比如AngularJS或ReactJS。两者都是非常大且支持良好的项目，因此您可以找到大量文档和教程。你很可能最终只使用Symfony作为RESTful服务，而Angular/React负责其余的工作（模板加载，向服务器发送请求等）。此外，js 框架将负责深度链接，最终您将拥有更好的工作、更易于维护的应用程序。

最初需要做更多的工作，尤其是在您引导应用程序之前，但随后维护和实现新功能变得更加容易，因此最终会得到回报。使用您当前的方法，您很快就会发现自己陷入了一团糟，充满了 100 多个模板、js 回调、包含等。我是从个人经验说的！

嗯...Jquery的工作原理是这样的：当你将一个事件附加到html时，如果html不存在，则该事件不会附加到任何内容。如果该元素存在，则事件已正确附加。它仅在执行 on 函数时附加到现有元素。这是一种正确的行为。过去，它曾经存在一个 .live 方法，该方法完全符合您的要求：您附加了一个事件，如果您在附件之后创建元素，则新元素也包含该事件。

添加两次 js 不是解决方案。正如您在单击后所说，该按钮将执行两次。为什么加载内容后不附加事件？如果你在页面开始中加载它，你可以在主文件中执行：

$(function(){    // will force to execute the on method after all the page is loaded.
    $('.submenu .button').on ('click', function (){
         ...
    });
});

如果你通过 ajax 加载菜单，在回调中和将 html 菜单添加到主菜单后，你必须使用我上面写的代码。

相关文章：