Script working in codepen but not when called in html

JavaScript
1

Hey,
I’ve been trying to get a script to launch when a bootstrap modal is closed but i can’t get it to work. When the script is input separately in codepen it works just fine, but I can’t get it to trigger when called in html. What did I get wrong?
Here’s the pen with a subsitution “alert” script embedded in html (right after the last div : https://codepen.io/nicolas-hadot/pen/QBazGz
Thank you so much

2

Your JavaScript code must be put below your dependencies like this:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script type="text/javascript">
  $(".modal").on('hide.bs.modal', function() {
    alert('The modal is completely hidden now!');
  });
</script>

The reason it works in Codepen’s panel, is the way Codepen has it set up. They are linking to the JavaScript like this:

<!-- These dependencies are loaded here from settings -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Your script is then loaded below -->
<script type="text/javascript" src="./path/to/script"></script>

When you are setting HTML up yourself, make sure you get dependencies in the right order. Good luck!

3

thank you for the quick reply! it works like you said. but not in the page i’m coding… there might be some conflicts somewhere i’m not aware of. i tried loading it without the other scripts and css and it works. i’ll dive into it, and try to spot the discrepancy…