'JavaScript effects are not working on Elementor edit page

I'm developing an elementor widget. The widget font view js is working fine but the elementor edit page js effects are not working. I'm using some hooks to try. Now, What is the perfect way to js loading for elementor edit page.

WP Plugin Link:- https://github.com/Ferdaussk/image-compare.git

Problem Video:- https://drive.google.com/file/d/1lOy1TEHUszLXEYvdJueZQrOuqsaax-nX/view?usp=sharing

All assets enqueue hooks which I used

    public function bwdic_all_assets_for_the_public(){
    wp_enqueue_script( 'bwdic_compare_the_main_one_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-one.js', array('jquery'), '1.0', true );
    wp_enqueue_script( 'bwdic_compare_the_mainel_two_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-two.js', array('jquery'), '1.0', true );
    wp_enqueue_script( 'bwdic_compare_the_mainel_three_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-three.js', array('jquery'), '1.0', true );
    wp_enqueue_script( 'bwdic_compare_the_mainel_four_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-four.js', array('jquery'), '1.0', true );
    wp_enqueue_script( 'bwdic_compare_the_mainel_five_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-five.js', array('jquery'), '1.0', true );
    wp_enqueue_script( 'bwdic_compare_the_mainel_six_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-six.js', array('jquery'), '1.0', true );
    $all_css_js_file = array(
        'bwdic_compare_main_css' => array('bwdic_path_define'=>BWDIC_ASFSK_ASSETS_PUBLIC_DIR_FILE . '/css/style.css'),
    );
    foreach($all_css_js_file as $handle => $fileinfo){
        wp_enqueue_style( $handle, $fileinfo['bwdic_path_define'], null, '1.0', 'all');
    }
}
public function bwdic_all_assets_for_elementor_editor_admin(){
    wp_enqueue_script( 'bwdic_compare_admin_the_main_one_js', plugin_dir_url( __FILE__ ) . 'assets/admin/js/custom-one.js', array('jquery'), '1.0', true );
    $all_css_js_file = array(
        'bwdic_compare_admin_icon_css' => array('bwdic_path_admin_define'=>BWDIC_ASFSK_ASSETS_ADMIN_DIR_FILE . '/icon.css'),
    );
    foreach($all_css_js_file as $handle => $fileinfo){
        wp_enqueue_style( $handle, $fileinfo['bwdic_path_admin_define'], null, '1.0', 'all');
    }
}
public function bwdic_all_assets_for_the_frontens_scripts(){
    wp_enqueue_script( 'bwdic_compare_admin_the_main_one_jsaa', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-one.js', array('jquery'), '1.0', true );
}

public function __construct() {
    // For public assets
    add_action('wp_enqueue_scripts', [$this, 'bwdic_all_assets_for_the_public']);

    // For fontend scripts
    add_action( 'elementor/frontend/init', [ $this, 'bwdic_all_assets_for_the_frontens_scripts' ] );

    // For Elementor Editor
    add_action('elementor/editor/before_enqueue_scripts', [$this, 'bwdic_all_assets_for_elementor_editor_admin']);
}
javascriptphpwordpresspluginselementor


Solution 1:[1]

You should check your console in chrome developer tools. Sometimes there is bug when elementor editor doesn't apply ur javascript changes in real time. If you check console, you will know what I mean

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zirekx

Related Questions