jQuery is not accessing elements inside elementor editor

Question

I am trying to build an Elementor widget, and i did also every thing is working as expected

  • Working in both editor and frontend
  • Live preview is working
  • Scripts/styles files are loaded normally

But;

The problem is that jQuery cann’t access dom elements inside the editor. I checked that the script file is loaded by simple console.log and the result output normally (means the script file is loaded). What am i may missing.

You may need to check my code, so here it is:

Inside elemetor loader

/**
 * Constructor
 *
 * @since 1.0.0
 *
 * AccessPress Themes public
 */
public function __construct() {

    add_action( 'init', [ $this, 'i18n' ] );
    add_action( 'plugins_loaded', [ $this, 'init' ] );
    add_action( 'elementor/editor/before_enqueue_scripts', [ $this, '_scripts' ] );
    add_action( 'elementor/frontend/after_register_scripts', [ $this, '_scripts' ] );
    add_action( 'elementor/editor/before_enqueue_styles', [ $this, '_styles' ] );
    add_action( 'elementor/frontend/after_register_styles', [ $this, '_styles' ] );
}


/**
 * Register widgets style
 */
public function _styles(){
        
    $styles = array(
        'owl-menu' => 'owl-menu',
        'posts-grid' => 'posts-grid',
        'slick-vtext' => 'slick-vtext-slider',
    );
        
    $styles_libs = [
        'circle' => 'circle',
        'slick' => 'slick',
        'heapshot' => 'heapshot',
        'owl.carousel' => 'owl.carousel.min',
        'font-awesome-5-all' => 'all',
    ];
    
    $styles = array_merge($styles, $styles_libs);

    foreach($styles as $style => $file_name){
        
        $handle = in_array($style, array_keys($styles_libs)) ? $style : 'anoel-' . $style;
        
        wp_register_style( 
            $handle, 
            ANOEL_URI . 'assets/css/'.$file_name.'.css', 
            false,
            filemtime(
                wp_normalize_path(ANOEL_DIR . 'assets/css/'.$file_name.'.css' )
            ) 
        );
    }

}

/**
 * Register widgets scripts
 */
public function _scripts(){
    
    wp_enqueue_script( 'jquery' );
    
    $scripts = array(
        'slick-vtext' => 'slick-vtext-slider',
        'headpshot-init' => 'headpshot-init',
    );
    
    $libs_scripts = [
        'circle' => 'circle',
        'slick' => 'slick.min',
        'heapshot' => 'jquery.heapshot',
        'imagesloaded' => 'jquery.imagesloaded.min',
        'jQueryRotate' => 'jQueryRotate.min',
        'owl.carousel' => 'owl.carousel.min'
    ];
    
    $scripts = array_merge($scripts, $libs_scripts);

    foreach($scripts as $script => $file_name){

        
        $handle = in_array($script, array_keys($libs_scripts) ) ? $script : 'anoel-' . $script;
        
        if ($script == 'slick-vtext') {
            $deps = ['jquery', 'slick'];
        }else{
            $deps = ['jquery'];
        }
        $registered = wp_enqueue_script( 
            $handle , 
            ANOEL_URI . 'assets/js/'.$file_name.'.js' ,
            $deps,
            filemtime(
                wp_normalize_path(ANOEL_DIR . 'assets/js/'.$file_name.'.js' )
            ), 
            true 
        );
        
        
    }
    
    
}

Inside widget class

/**
 * Get scripts dependancies
 * @return type
 */
public function get_script_depends(){
    
    return ['slick','anoel-slick-vtext'];
}

/**
 * Get style dependancies
 * @return type
 */
public function get_style_depends(){
    
    return ['slick','anoel-slick-vtext'];
}
0
Mohamed Omar 2 months 0 Answers 16 views 0

Leave an answer