在 html 更改时重新加载 javascript答案

【问题标题】：Reload javascript on html change在 html 更改时重新加载 javascript
【发布时间】：2016-02-27 11:18:37
【问题描述】：

在我网站的 index.html 中，我有一个 div 元素，当单击菜单项时会发生变化（使用 jquery）。插入到这个元素中的页面都有一些 JavaScript 函数。但是，我在正文关闭之前将我的 javascript 文件加载到 index.html 中。当此 div 元素更改时，这些文件不会“重新加载”，因此 javascript 在这些页面上不起作用。我将如何解决这个问题？我是否必须在元素更改时重新加载 javascript 文件？如果有，怎么做？

编辑：抱歉，这些是页面插入的代码：

$("li.load-page").click(function() {

  var pagina = $(this).data("page") + ".html";
  console.log(pagina);
  $("#main-content").load(pagina);
});

main-content 是 index.html 中的一个空 div。

例如，在插入的其中一个页面中，我在我的 html 中使用了 jquery 手风琴，但它不起作用，因为它包含在头部中，并且页面在插入时不会刷新：

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        heightStyle: "content"
    });
});

EDIT2：我在这里模拟了我的问题：https://jsfiddle.net/ktoeon2f/2/

【问题讨论】：

你能分享你的代码吗？
到目前为止你做了什么？把你的代码放在这里！
你给定的脚本标签是源还是直接写在里面的脚本？
这是一个来源。有些包含在头部，有些在身体关闭之前。它们在 index.html 中工作得很好。但是由于页面仅在按下菜单项后才被“包含”，因此 javascripts 似乎没有影响，因为它们是在页面内容之前加载的..

标签： javascript jquery html

【解决方案1】：

<script type="text/javascript" id="jsid">
//your script here
</script>

after onchange call

eval(document.getElementById("jsid").innerHTML);


after load

$("li.load-page").click(function() {

  var pagina = $(this).data("page") + ".html";
  console.log(pagina);
  $("#main-content").load(pagina);

   eval(document.getElementById("jsid").innerHTML); 
   // give an id (jsid) to script tag inside your loaded page
});

【讨论】：

这看起来是个不错的解决方案。当脚本位于 src 属性中而不是标签中时，我将如何使用它？像这样的东西会起作用吗？ eval(document.getElementsByClassName("jsid").getAttribute(src))
可以告诉我编写脚本的代码，哪些代码不起作用？据我了解，您的脚本必须写在脚本标签中，我建议您将 id 提供给该脚本标签。
在头部例如，我有这个：
好的。尝试并按上述方式调用或使用类。它可能会工作
stackoverflow.com/questions/9129666/…

【解决方案2】：

问题在这个帖子中解决了：jQuery: Changing the CSS on an element loaded with ajax?

解决方案是在 ajax 调用的 succes 函数中加载其他函数：

$('#main-content').load(
    url,
    function(){
        accordionFunction();
    }
);

【讨论】：