Bootstrap dropdown Jquery Uncaught Error: Syntax error, unrecognized expression

Question

I am trying to add an external http:// link on my bootstrap drop-down menu, but it always cause an

Uncaught Error: Syntax error, unrecognized expression: http://example.com/

Here's the code I used with jQuery v1.11.3 and bootstrap v3.3.5

<nav class="main-navi">
    <div class="webinarlink"><a class="btn btn-danger btn-block" data-target="#" style="background-color:#EA4A2B;margin:auto;" href="http://example.com/" target="_blank"><i class="icon-users"></i>Webinar</a></div>
    <ul>
        <li class="active"><a class="scroll-up" href="#home"><i class="fa fa-home"></i>&nbsp;Home</a></li>
        <li class=""><a class="scroll" href="#features">Features</a></li>
        <li class=""><a class="scroll" href="#testimonials">Testimonials</a></li>
        <li class=""><a class="scroll" href="#pricing">Prices</a></li>
        <li class="has-dropdown"><a class="scroll" href="#">Help<i class="fa fa-caret-down"></i></a>
            <ul class="dropdown">
                <li class=""><a class="scroll" href="#faq"><i class="fa fa-question-circle"></i>&nbsp;FAQ</a></li>
                <li class=""><a class="scroll" href="#team"><i class="fa fa-info-circle"></i>&nbsp;About Us</a></li>
                <li class=""><a class="scroll" href="#contus"><i class="fa fa-envelope"></i>&nbsp;Contact Us</a></li>
                <li class=""><a href="#pricing" class="scroll" onclick="Tawk_API.toggle();"><i class="fa fa-comments"></i>&nbsp;Chat with Us</a></li>
            </ul>
        </li>
    </ul>
</nav>

I tried adding data-target="#" but it didn't work.

Answer 1

If you are stuck on old Bootstrap then you can patch getParent function of bootstrap-dropdown.js.

Just replace $parent = selector && $(selector) with this:

if (selector && selector !== '#') {
  $parent = $(selector)
}

Answer 2

The issue has been fixed by following these steps:

• Use latest version of jQuery v2.1.3 and bootstrap v3.3.6
• Load Bootstrap JS after jquery in order
• Using data-target="#" with href="#" and put the external link on an onClick() trigger.

Hope it helps.

Answer 3

In my case, I had a script that automatically switches the "active" class on menu items on scroll, all the 'href' of the 'a' html tags under the Boostrap menu must not equal to "#", this solution worked for my case, if anyone has a similar case.