JavaScript在DIV中的加载内容中无法正常工作

Question

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

的第一个问题是，在每个选项卡中加载不能使用初始加载在index.html中的js文件的HTML，正如你在这个example中看到的那样，当我们点击每个标签的内容时，你应该检查一个通知，但什么都不做。

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

而我试过event.preventDefault();或event.stopPropagation();并且它不能解决问题。

它是否可以将js包含在HTML的整体结构中两次？ （包含在最初的头部，然后是容器格）

Answer 1

对于这种情况，动态加载HTML + JavaScript不是最好的方法。我建议你使用一些JavaScript SPA框架，如AngularJS或ReactJS。两者都是非常大的，并得到很好的支持的项目，所以你可以找到大量的文档和教程。您最有可能最终将Symfony仅用作REST风格的服务，而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菜单到主之后，你必须使用我写的代码以上。