How to run jQuery correctly with the latest version of Bricks?

How To
1

I am trying to run a Javascript code on my website with the latest version of Bricks. If I run the code in the console, it works perfectly. But as soon as I try to add it to the scripts section in Bricks settings stop working: Uncaught ReferenceError: jQuery is not defined

What is the best practice to run jQuery codes with Bricks 1.4 (In this version the development team removed jQuery from the Front end)? Thanks!

jQuery(document).ready(function(){
jQuery(".footer-div").click(function(){
    jQuery('.footer-div').replaceWith('<a id="brxe-sfsbqb" href="tel:+3XXXXXXXXXXXX">+3XXXXXXXXXXXX</a>');
  });
});
1 Like
2

Hi.

Add this in your child theme’s functions.php to load jQuery that is built into WordPress:

wp_enqueue_script( 'jquery' );
6 Likes
3

Awesome, really appreciate your help!

4

I’ve tried using the function they provide in the changelog but it still doesn’t load:

CleanShot 2022-09-06 at 13.19.25@2x
CleanShot 2022-09-06 at 13.19.25@2x2190×1306 236 KB

The only way I’ve got JQuery to load atm is via a CDN link

5

This works fine:

CleanShot 2022-09-07 at 17.41.36@2x
CleanShot 2022-09-07 at 17.41.36@2x1338×1282 145 KB

1 Like
6

I did try that too, and still no luck:

7

jQuery works in no conflict mode in WordPress.

You need to pass $ as the argument to the ready method.

Like this:

jQuery(document).ready(function($) {
	// code comes here
});
3 Likes
8

That works great! Thank you :slight_smile:

9

Can someone clarify please, so it’s not enough to manually enter this code from above as a snippet, but afterwards we also have to phrase code differently? For example I can’t just write: " jQuery(‘.button’).click();" so that the button class is clicked after a page load? I should add something more?

10

Put this in your function.php file or somewhere else you load php from:

wp_enqueue_script( 'jquery' );

and then on your page put something like this:

// Waits till document is ready so that your button exists before trying to click it.
jQuery(document).ready(function($) {
	$(‘.button’).click();
});
2 Likes
11

To my limited knowlegde that is because in the early days people would write all sort of plugins for jQuery that conflicted with another. So to make this easier WP started to use jQuery not in ‘base’ but in no-conflict mode. And I think this is now ‘standard’ (but someone more knowledgeable on this topic educate me please if thats incorrect).