JQuery: Script is working in console but not in attached file

I’m working on a custom WordPress site that has a lot of javascript (all developed by another developer)

I’m trying to add a script to the bottom of the scripts.js file and it’s not working everywhere. It works in the console. It works in firefox.
It’s inside it’s own document ready function.
The document ready is working (I used an alert to test this), however my alert, console log and script inside this doc ready function will only work inside of the console (or firefox), but not from the scripts.js file in chrome and safari.

Read More

Here is my code (it’s to make a video play and pause on click of the video window, not just the play controls)

  jQuery(document).ready(function () {
   // alert('working')
    /**
     *  This module controls the video players
     */
      jQuery('video').click(function(){
        //alert('working');
        this.paused?this.play():
        this.pause();
        //console.log(this);
    });

});

Any help is greatly appreciated.

Related posts

Leave a Reply

2 comments

  1. I’m assuming this is because your video element is not actually present, or is being switched out, after the ready event fires.

    It’s possible that firefox happens to be loading the video element before your ready event fires, but this would likely vary on how fast the javascript and html are intepreted.

    Instead of putting the event directly on the ‘video’ elements, put it on the document with a ‘video’ filter.

    http://jsfiddle.net/2kmxL1h4/1/

    jQuery(document).on('click', 'video', function () {
            //alert('working');
            this.paused ? this.play() : this.pause();
            //console.log(this);
        });
    
  2. Maybe it is a problem with the different JS-Engines !

    Did you try what happens, if you move jQuery('video').click(function(){console.log(this);}); within the ready part of the old source of the file ?