I have used this jquery script on many of my sites with the same theme, settings, etc.
It's in a wordpress Genesis Child theme.
On my current local build, however, when I click on an a href that has the class "scroll", I am getting a console error that reads:
Line 19 of my app.js is this code that I have never had an issue with before:
$(".scroll").click(function () {
if (location.pathname.replace(/^\//, "") === this.pathname
.replace(/^\//, '') && location.hostname === this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this
.hash.slice(1) + "]");
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
I am running jQuery 3.3.1. I have commented out all code in the app.js to identify where the issue may be coming from. This code is right at the top and I have added console.logs all over the document, which show in Console.
What am I doing wrong here?
Thank you!
I have used this jquery script on many of my sites with the same theme, settings, etc.
It's in a wordpress Genesis Child theme.
On my current local build, however, when I click on an a href that has the class "scroll", I am getting a console error that reads:
Line 19 of my app.js is this code that I have never had an issue with before:
$(".scroll").click(function () {
if (location.pathname.replace(/^\//, "") === this.pathname
.replace(/^\//, '') && location.hostname === this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this
.hash.slice(1) + "]");
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
I am running jQuery 3.3.1. I have commented out all code in the app.js to identify where the issue may be coming from. This code is right at the top and I have added console.logs all over the document, which show in Console.
What am I doing wrong here?
Thank you!
Share Improve this question asked Oct 24, 2018 at 15:13 Katie R.Katie R. 131 gold badge1 silver badge4 bronze badges 1- Oops, I was too fast at replying. Did you use an anonymous function where you pass in jQuery to be mapped to the dollar sign $? Or a document ready where you pass the dollar sign? You need one of those functions. How do you initialize your script? Please post all your code, so we could help you. – Remzi Cavdar Commented Oct 24, 2018 at 16:51
1 Answer
Reset to default 1In WordPress jQuery is loaded in noConflict mode, it means that you need to use jQuery instead of the dollar sign $
You could wrap the code in an anonymous function (technically any IIFE) where you pass in jQuery to be mapped to $ and combine this with document ready, like this:
jQuery(document).ready(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
});
You could also do it without document ready (not recommended):
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
See link for more explanation: https://digwp/2011/09/using-instead-of-jquery-in-wordpress/