jquery - Uncaught TypeError: Cannot read property 'replace' of undefined

admin管理员组

文章数量:1130349

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!

• jquery
• genesis-theme-framework

Share Improve this question asked Oct 24, 2018 at 15:13 Katie R.Katie R. 1311 gold badge11 silver badge44 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In 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/

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!

• jquery
• genesis-theme-framework

Share Improve this question asked Oct 24, 2018 at 15:13 Katie R.Katie R. 1311 gold badge11 silver badge44 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In 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/

本文标签： jqueryUncaught TypeError Cannot read property 39replace39 of undefined