title: Syntax error, unrecognized expression: /blog
body: <p>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 <code>href="#"</code> tags in the otherwise single-page index.html:</p>
  
  <pre><code>                            &lt;!-- Menu --&gt;
          &lt;ul class="menu"&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#skills"&gt;Skills&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#portfolio"&gt;Works&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>I've tried a variety of different selectors to get everything working correctly, but nothing seems to work. I gave the blog <code>href</code> a unique id and tried selecting it using <code>#wp-blog</code>, I tried selecting it using <code>.menu li a[href^='/']</code> and even the full URL with <code>.menu li a[href='{url}']</code>, 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 <code>href</code> tags, but it wasn't working either way. Here's the JS in context:</p>
  
  <pre><code>$(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");
          });
  </code></pre>
  
  <p>Despite several hours of research and throwing nearly a full day away at this, my console is throwing this error every time I scroll:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>I've already checked out other questions on jQuery selectors: <a href="https://stackoverflow.com/questions/303956/select-a-which-href-ends-with-some-string">Select &lt;a&gt; which href ends with some string</a></p>
  
  <p>and jquery syntax error questions concerning href selectors here: <a href="https://stackoverflow.com/questions/31197452/syntax-error-unrecognized-expression-for-href">Syntax error, unrecognized expression for href</a></p>
  
  <p>and also here: <a href="https://github.com/jquery/jquery/issues/2824" rel="nofollow noreferrer">https://github.com/jquery/jquery/issues/2824</a></p>
  
  <p>as well as issues with multiple selectors here: <a href="https://stackoverflow.com/questions/5736811/multiple-selector-chaining-in-jquery">Multiple selector chaining in jQuery?</a></p>
  
  <p>Any advice is greatly appreciated! Thanks.</p>