How to load javascript correctly dynamically

Navigation
1

I have two pages called header.html and footer.html. They are included on all pages via javascript. For the header to work properly and the menu open when I hover the mouse I use the bootstrap-hover-dropdown.min.js script, but this menu only works correctly if I include this bootstrap script straight into the header.html, but if I you do this by loading the index.html page, conflicts appear in the browser console by loading header and index scripts. If I put to load the bootstrap script on the index page, the menu does not open when hovering.

In summary, the header.html menu does not see this tag that is inserted in index.html: 

<script src="assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>

And so the menu does not work, but if I put this tag in header.html the menu works, but script conflicts appear in the browser console.

Any ideas how to solve this?

    
asked by anonymous 09.11.2015 / 18:09

1 answer

0

You can load your file header.html as you already did in load () and when loaded you load your script with getScript, see example: 

$("#resultado").load("header.html", function() {
  // arquivo header.html carregado.
  var boostrapHover = 'assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js';
  $.getScript(boostrapHover, function(data, textStatus, jqxhr) {
    // arquivo bootstrap-hover-dropdown.js carregado.
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="resultado"></div>
    
09.11.2015 / 19:02
Format JOIN result object Dynamic Allocation and Pointers on the Moon