I am currently working on a custom WordPress-Plugin in which I need to extend the menu of the Elementor-plugin (the menu on the left when you edit a page or post via Elementor). For some reason I am able to access the HTML-elements of the Elementor-area in jQuery through a jQuery-function. When I define a variable for the element with the id #elementor-editor-wrapper I get a message in the console, that the element doesn't exist. When I type the command in the console directly, I can use the said element without any issues. Does anybody have any idea how to access the Elementor-elements through jQuery? Any help would be appreciated.
-
Have you checked that your jQuery code isn't running before elementor has finished loading? try putting your jQuery code in a document ready functionJaimee Page– Jaimee Page2023-04-13 11:55:57 +00:00Commented Apr 13, 2023 at 11:55
-
@JaimeePage thank you for your input. I have tried that previously and it still wont work.Dennis– Dennis2023-04-14 19:36:35 +00:00Commented Apr 14, 2023 at 19:36
1 Answer
Make sure that you have jQuery properly enqueued on your website. You can do this by adding the following code to your functions.php file:
function my_custom_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
Next, you can use the jQuery ready() method to wait for the page to load before accessing the navigation elements.
jQuery( document ).ready(function( $ ) {
// Your code here
});
To access the Elementor navigation elements, you can use jQuery selectors. For example, if you want to select the main navigation menu, you can use the following code:
var $menu = $( '#site-navigation' );
This code selects the element with the ID site-navigation.
Once you have selected the navigation element, you can use jQuery methods to manipulate it. For example, if you want to add a class to the navigation element, you can use the following code:
$menu.addClass( 'my-custom-class' );
This code adds the class my-custom-class to the navigation element.
In general, the process of accessing Elementor navigation elements through jQuery is analogous to that of accessing any other element on your website. The only thing you need to do is to apply the correct jQuery selectors and methods to handle the elements.
-
SHEESHRAM thank you for your input. I have tried all those things and it still wont work. The jQuery code works just fine on other elements on the page. It is only the elements of the Elementor-navigation that don't work at all (not even with regular JavaScript). It almost seems like that those elements are somehow blocked. Do you have any idea why that might be? Thanks in advance.Dennis– Dennis2023-04-14 19:38:53 +00:00Commented Apr 14, 2023 at 19:38