CyberHosting

jquery events not triggering on initial page load

The following php is outputting various videos on my page with the class name ".videos":

<?php
wp_video_shortcode($attr, $content);
?>
The generated code for each video looks like this:


The following jquery is to remove the video controls and make each one play on mouseover and pause on mouseout:



jQuery(document).ready(function() {
jQuery(".videos").removeAttr("controls");

jQuery(".videos").on("mouseover", function(event) {
this.play();

}).on('mouseout', function(event) {
this.pause();

});
});

THE PROBLEM:

It all works as it should, EXCEPT, when the page first loads, the mouseover events aren't recognised unless and until you click somewhere on the page first.

I'm sure this has to do with delegation or something like it. The following for example works when the page is loaded, without clicking somewhere on the page first:

jQuery(document).on('focus mouseover', '.videos', function(e){
alert("focused on " + jQuery(e.target).attr('id'));
});
However, when binding the video to above code, the videos don't react unless again, you click on the page somewhere first.

I've also tried document.focus(); and other ways to give focus on various elements but cannot get it to work.

Help, I'm running out of hair to pull out :(

Sign In or Register to comment.
CyberPanel Discord

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!