adam78
adam78

Reputation: 10068

jQuery Bootstrap Toggle - Uncaught Error: Syntax error, unrecognized expression: # at Function.Sizzle.error

I am using Jquery 3.3.1 and Bootstrap 3.3.7 pulled via npm.

I have the following markup to toggle a div:

<div class="text-right">
     <a class="js-accordion-trigger" data-toggle="collapse" href="#advanced-search" aria-expanded="false" aria-controls="advanced-search">Advanced search <span class="js-notifier"></span></a>
</div>

<div id="advanced-search" class="js-accordion-content collapse">

</div>

However I am now getting the following error in console:

libs.js:1541 Uncaught Error: Syntax error, unrecognized expression: #
at Function.Sizzle.error (libs.js:1541)
at Sizzle.tokenize (libs.js:2193)
at Sizzle.select (libs.js:2620)
at Function.Sizzle [as find] (libs.js:845)
at jQuery.fn.init.find (libs.js:2873)
at new jQuery.fn.init (libs.js:2983)
at jQuery (libs.js:139)
at getParent (libs.js:11147)
at HTMLAnchorElement.<anonymous> (libs.js:11157)
at Function.each (libs.js:354)

Upvotes: 11

Views: 5601

Answers (3)

RafaSashi
RafaSashi

Reputation: 17205

Upgrading to bootstrap 3.4.1 from 3.3.7 seems to fix this issue:

https://getbootstrap.com/docs/3.4/getting-started/

Upvotes: 0

Pong
Pong

Reputation: 41

I also encounter a similar issue, though it's not a show stopper.

it is when I created a button that would invoke a modal to show up, something like the code below.

<a href="#" id="btnMyButton" data-toggle="modal" onclick="myFunction()" data-dismiss="modal">

It looks like the cause is the following attribute:

href="#"

Replacing it with the attribute below removes shown error

href="javascript:void()" 

Upvotes: 4

Nishant Singh
Nishant Singh

Reputation: 21

I was getting a similar error with bootstrap 3 and jquery 3.3.1. I was trying to use the dropdown but had accidentally written data-target="#". I removed that and the error went away. I read about this here https://www.drupal.org/project/bootstrap_mint/issues/2957269

Upvotes: 2

Related Questions