Question

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

第一个问题是，在每个标签中加载的HTML中无法使用最初在index.html中加载的js文件，正如您在example中看到的那样，我们应该在点击时查看通知每个标签的内容，但什么都不做。

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

我尝试了event.preventDefault();或event.stopPropagation();，并没有解决问题。

它是否可以在HTML的整体结构中包含两次js？（包括在初始头部和容器div中）

Answer 1

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

最初需要做的工作要多一些，特别是在你引导应用程序之前，但随后它会更容易维护和实现新功能，所以它最终会得到回报。根据您目前的方法，您很快就会发现自己陷入了一大堆模板，js回调，包含等等。我从个人经历中说出这一点！

Answer 2

唉... 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菜单添加到main后，您必须使用我上面编写的代码。

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

2 个答案: