Reload javascript on html change

Question

In my site's index.html I have a div element that changes when a menu item gets clicked (with jquery). The pages that get inserted into this element all have some javascript functions in them. However, I load my javascript files in the index.html right before the body closes. These files don't 'reload' when this div element changes, so the javascript doesn't work on these pages. How would I fix this issue? Do I have to reload the javascript files on the change of the element? And if so, how?

edit: Sorry, these are the codes for the page inserts:

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

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

main-content is an empty div in index.html.

In one of the pages that gets inserted I use the jquery accordion in my html for example, but it doesn't work since it's included in the head, and the page doesn't refresh on insertion:

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

EDIT2: I have simulated my problem here: https://jsfiddle.net/ktoeon2f/2/

Your given script tag a source or directly written script inside of it? — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Feb 27, 2016 at 11:21
It's a source. Some are included in the head, some before the body closes. They work all just fine in the index.html. But since pages get 'included' only after a menu item is pressed, the javascripts don't seem to have influence since they are loaded before the page content.. — Cake
– Cake, Commented Feb 27, 2016 at 11:27

Shelim · Accepted Answer · 2016-02-27 11:34:16Z

0

<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
});

edited Feb 27, 2016 at 11:34

answered Feb 27, 2016 at 11:28

Shelim

1419 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Cake Over a year ago

That looks like a good solution. How would I use it when the script is in the src attribute and not within the tags? Would something like this work? eval(document.getElementsByClassName("jsid").getAttribute(src))

Shelim Over a year ago

can show me the code where the script is written which is not working ? As i understood your script must be written in script tag and i am suggesting you to give the id to that script tag.

Cake Over a year ago

In the head for example, I have this: <script type="text/javascript" src="js/referenties.js" class="js"></script>

Shelim Over a year ago

ok. try <script type="text/javascript" src="js/referenties.js" class="js" id="jsid"></script> and call as above or with class.It might work

Shelim Over a year ago

stackoverflow.com/questions/9129666/…

|

Community · Accepted Answer · 2017-05-23 12:07:31Z

0

The problem was solved in this thread: jQuery: Changing the CSS on an element loaded with ajax?

The solution was to load the other function(s) in the succes function of an ajax call:

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

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 27, 2016 at 20:54

Cake

3186 silver badges21 bronze badges

1 Comment

RokeJulianLockhart Over a year ago

Should the post be marked as a duplicate, then?

Collectives™ on Stack Overflow

Reload javascript on html change

2 Answers 2

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related