CODEWITHSUNDEEP
jquerywordpresssyntax-error
Alex Douglas
Alex Douglas

Reputation: 576

New version of jQuery is saying I have a syntax error, when there is none

I have a function that I use in a Wordpress theme, and after a recent update jQuery started throwing an error on my site:

 Uncaught Error: Syntax error, unrecognized expression: .mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*=#]
  at Function.ea.error (jquery.js?x11568:2)
  at ea.tokenize (jquery.js?x11568:2)
  at ea.select (jquery.js?x11568:2)
  at Function.ea [as find] (jquery.js?x11568:2)
  at n.fn.init.find (jquery.js?x11568:2)
  at new n.fn.init (jquery.js?x11568:2)
  at n (jquery.js?x11568:2)
  at initMobileMenu (autoptimize_aaf340fa1b0ef77ca18e853d0b265e53.js:332)
  at HTMLDocument.<anonymous> (autoptimize_aaf340fa1b0ef77ca18e853d0b265e53.js:332)
  at i (jquery.js?x11568:2)

The stack trace is pointing me to a function named initMobileMenu in default.min.js here is that function:

 /*
 ** Show/Hide Mobile menu
 */
 var $j = jQuery.noConflict();
 function initMobileMenu(){
     "use strict";

     $j(".mobile_menu_button span").on('tap click', function(e){
      e.preventDefault();

    if ($j(".mobile_menu > ul").is(":visible")){
        $j(".mobile_menu > ul").slideUp(200);
    } else {
        $j(".mobile_menu > ul").slideDown(200);
    }
});

$j(".mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*=#]").on('tap click', function(e){
    e.preventDefault();

    if ($j(this).closest('li.has_sub').find("> ul.sub_menu").is(":visible")){
        $j(this).closest('li.has_sub').find("> ul.sub_menu").slideUp(200);
        $j(this).closest('li.has_sub').removeClass('open_sub');
    } else {
        $j(this).closest('li.has_sub').addClass('open_sub');
        $j(this).closest('li.has_sub').find("> ul.sub_menu").slideDown(200);
    }
});

$j(".mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > h3, .mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > a[href*=#]").on('tap click', function(e){
    e.preventDefault();

    if ($j(this).parent().find("ul.sub_menu").is(":visible")){
        $j(this).parent().find("ul.sub_menu").slideUp(200);
        $j(this).parent().removeClass('open_sub');
    } else {
        $j(this).parent().addClass('open_sub');
        $j(this).parent().find("ul.sub_menu").slideDown(200);
    }
});

$j(".mobile_menu ul li > a, .mkd_logo a").on('click', function(){

    if(($j(this).attr('href') !== "http://#") && ($j(this).attr('href') !== "#")){
        $j(".mobile_menu > ul").slideUp();
    }
});
}

I can't figure out why jQuery thinks there is a syntax error above? I use this: https://esprima.org/demo/validate.html and it says that my code is valid. I'm wondering if it doesn't like this expression "a[href*=#]" in my code above?

Upvotes: 1

Views: 615

Answers (1)

Taplar
Taplar

Reputation: 24965

Your selector has issues even in the native querySelector method.

document.querySelector('.mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*=#]');

However, putting quotes around the hash (which causes it to be treated as a literal character) results in the error no longer happening.

document.querySelector('.mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*="#"]');

Upvotes: 1

Related Questions