Why this function stops working when I load the script inside a div?

Question

I'm using the "plyr.js" video player script. All works perfectly when I open the page on its own, but when I load it inside a div of another (i.e. when I load video.html inside a div of my index.html), the function stops working...

Any idea on how to solve it?

This is the code:

<link rel='stylesheet' href='https://cdn.plyr.io/3.4.6/plyr.css'>

<video class="video-fluid" id="player" poster="fotos/demo1.jpg" playsinline autoplay loop>
  <source src="demo1.mp4" type="video/mp4">
</video>

<button type="button" class="btn js-stop" id="stop">Stop</button>


<script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {    
      controls = [];
      player = new Plyr('#player', { controls });
      window.player = player;
    });
    $("#stop").click(function(){
      player.stop();
    });
</script>

As I mentioned, the code on its own works perfectly, but when I load it inside a div of another page with a .load("video.html"), the stop button no longer works.

Thanks in advance!

What debugging steps have you taken? Are there any console errors? Is `player` instantiated when you click the stop button? — Flater, Jan 22 '19 at 10:54
you need to move the script into the callback function of the `.load` — Pete, Jan 22 '19 at 10:55
Possible duplicate of [jQuery .load() call doesn't execute JavaScript in loaded HTML file](https://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file) — Pete, Jan 22 '19 at 10:57
Possible duplicate of [Attach event to dynamic elements in javascript](https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript) — Liam, Jan 22 '19 at 11:01

t.niese · Accepted Answer · 2019-01-22T11:12:47.920

MDN: DOMContentLoaded:

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

So the DOMContentLoaded does only fire once, and the event will fire before the html that is loaded using .load("video.html") is added to the to the DOM, so the document.addEventListener('DOMContentLoaded', would not have any effect if it was added in the video.html.

I acutely don't see why you need that DOMContentLoaded event listener in that case.

If you write:

<video class="video-fluid" id="player" poster="fotos/demo1.jpg" playsinline autoplay loop>
  <source src="demo1.mp4" type="video/mp4">
</video>

<button type="button" class="btn js-stop" id="stop">Stop</button>


<script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>
<script>
    // document.addEventListener('DOMContentLoaded', () => {    
      controls = [];
      player = new Plyr('#player', { controls });
      window.player = player;
    // });
    $("#stop").click(function(){
      player.stop();
    });
</script>

Then new Plyr should still find that element, because the element is added to the DOM before the script is executed.

Thank you a lot! that solved the problem! I was using that code because I downloaded an example of the "plyr.js" usage and it was working perfectly as it was written till now.... Thanks again! — Leandro, Jan 22 '19 at 11:17

Why this function stops working when I load the script inside a div?

1 Answers1