Syntax error, unrecognized expression: /blog

Question

I'm adding a blog section to an existing single-page site, but running into some trouble with jQuery. The new blog will be hosted in a new /blog directory, and therefore the new menu item is different from all the other href="#" tags in the otherwise single-page index.html:

                            <!-- Menu -->
        <ul class="menu">
            <li><a href="#about">About</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#portfolio">Works</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

I've tried a variety of different selectors to get everything working correctly, but nothing seems to work. I gave the blog href a unique id and tried selecting it using #wp-blog, I tried selecting it using .menu li a[href^='/'] and even the full URL with .menu li a[href='{url}'], but I'm not seeing any results. Also, I tried swapping the double and single quotes, and that didn't work either. I believe the code started out with single quotes on the outside and doubles were used in the href tags, but it wasn't working either way. Here's the JS in context:

$(document).on("scroll", onScroll);

    $(".menu li a[href^='#'], .scroll-btn a[href^='#'], .menu li a[href='/blog']").on("click", function(e) {
        e.preventDefault();
        $(document).off("scroll");

        $("a").each(function () {
            $(this).removeClass("active");
        });

Despite several hours of research and throwing nearly a full day away at this, my console is throwing this error every time I scroll:

jquery-3.2.1.min.js:formatted:572 Uncaught Error: Syntax error, unrecognized expression: /blog
    at Function.ga.error (jquery-3.2.1.min.js:formatted:572)
    at ga.tokenize (jquery-3.2.1.min.js:formatted:896)
    at ga.select (jquery-3.2.1.min.js:formatted:1073)
    at Function.ga (jquery-3.2.1.min.js:formatted:311)
    at Function.a.find (jquery-migrate-1.4.1.min.js:5)
    at r.fn.init.find (jquery-3.2.1.min.js:formatted:1194)
    at r.fn.init.a.fn.find (jquery-migrate-1.4.1.min.js:5)
    at a.fn.init.r.fn.init (jquery-3.2.1.min.js:formatted:1215)
    at new a.fn.init (jquery-migrate-1.4.1.min.js:5)
    at r (jquery-3.2.1.min.js:formatted:33)

I've already checked out other questions on jQuery selectors: Select <a> which href ends with some string

and jquery syntax error questions concerning href selectors here: Syntax error, unrecognized expression for href

and also here: https://github.com/jquery/jquery/issues/2824

as well as issues with multiple selectors here: Multiple selector chaining in jQuery?

Any advice is greatly appreciated! Thanks.

could you use `".menu li a, .scroll-btn a[href^='#']"` instead? feels like something is trying to treat /blog like a regular expression. — castis, Nov 09 '17 at 19:43
[jQuery Selectors](https://api.jquery.com/category/selectors/): "To use any of the meta-characters (such as `!"#$%&'()*+,./:;<=>?@[\]^``{|}~`) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with `id="foo.bar"`, can use the selector `$("#foo\\.bar")`" — Andreas, Nov 09 '17 at 19:44

score 0 · Answer 1 · answered Nov 09 '17 at 19:56

0

Try using '.menu li a, .scroll-btn a[href^="#"]' instead.

I think jQuery is trying to treat /blog as a regular expression. So this error occurs.

answered Nov 09 '17 at 19:56

Jonas0000

1,085
1
12
36

score -1 · Answer 2 · answered Nov 09 '17 at 19:57

-1

This may be an escape problem with the selector try:

$(".menu li a[href^='#'], .scroll-btn a[href^='#'], .menu li a[href='\\/blog']").on("click", function(e) {

Shown working on this fiddle: https://jsfiddle.net/aLenr3fp/2/

answered Nov 09 '17 at 19:57

Phillip Thomas

1,450
11
21

Syntax error, unrecognized expression: /blog

2 Answers2