I'm trying to include a link in href but jQuery gives me the following error:

Uncaught Error: Syntax error, unrecognized expression:

I'm using jQuery 1.12.0 in CodeIgniter and anything resembling an URL gets rejected by jQuery in a href.

<li class="dropdown">
    <a href="#our-team" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Over ons <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="">Geschiedenis</a></li>
        <li><a tabindex="-1" href="#b">Onze doel</a></li>
        <li><a tabindex="-1" href="#c">Prestaties</a></li>
    </ul>
</li>

What's the cause and how to solve this? JavaScript:

jQuery(document).ready(function($) {

    'use strict';

    /************** Toggle *********************/
    // Cache selectors
    var lastId,
    topMenu = $(".menu-first"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){

        if($(this).hasClass('external')) {
            return;
        }

        var item = $($(this).attr("href"));
        if (item.length) { return item; }
    });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e){
        var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
        $('html, body').stop().animate({
            scrollTop: offsetTop
        }, 300);
        e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function(){
    // Get container scroll position
    var fromTop = $(this).scrollTop()+topMenuHeight;

    // Get id of current scroll item
    var cur = scrollItems.map(function(){
        if ($(this).offset().top < fromTop)
        return this;
    });
    // Get the id of the current element
    cur = cur[cur.length-1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        lastId = id;
        // Set/remove active class
        menuItems
        .parent().removeClass("active")
        .end().filter("[href=#"+id+"]").parent().addClass("active");
    }                   
    });

    $(window).scroll(function(){
        $('.main-header').toggleClass('scrolled', $(this).scrollTop() > 1);
    });

    $('a[href="#top"]').click(function(){
        $('html, body').animate({scrollTop: 0}, 'slow');
        return false;
    });

    $('.flexslider').flexslider({
        slideshow: true,
        slideshowSpeed: 3000,  
        animation: "fade",
        directionNav: false,
    });

    $('.toggle-menu').click(function(){
        $('.menu-first').toggleClass('show');
        // $('.menu-first').slideToggle();
    });

    $('.menu-first li a').click(function(){
        $('.menu-first').removeClass('show');
    });

    /************** LightBox *********************/
    $(function(){
        $('[data-rel="lightbox"]').lightbox();
    });

});

I'm trying to include a link in href but jQuery gives me the following error:

Uncaught Error: Syntax error, unrecognized expression: http://www.google.

I'm using jQuery 1.12.0 in CodeIgniter and anything resembling an URL gets rejected by jQuery in a href.

<li class="dropdown">
    <a href="#our-team" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Over ons <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="http://www.google.">Geschiedenis</a></li>
        <li><a tabindex="-1" href="#b">Onze doel</a></li>
        <li><a tabindex="-1" href="#c">Prestaties</a></li>
    </ul>
</li>

What's the cause and how to solve this? JavaScript:

jQuery(document).ready(function($) {

    'use strict';

    /************** Toggle *********************/
    // Cache selectors
    var lastId,
    topMenu = $(".menu-first"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){

        if($(this).hasClass('external')) {
            return;
        }

        var item = $($(this).attr("href"));
        if (item.length) { return item; }
    });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e){
        var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
        $('html, body').stop().animate({
            scrollTop: offsetTop
        }, 300);
        e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function(){
    // Get container scroll position
    var fromTop = $(this).scrollTop()+topMenuHeight;

    // Get id of current scroll item
    var cur = scrollItems.map(function(){
        if ($(this).offset().top < fromTop)
        return this;
    });
    // Get the id of the current element
    cur = cur[cur.length-1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        lastId = id;
        // Set/remove active class
        menuItems
        .parent().removeClass("active")
        .end().filter("[href=#"+id+"]").parent().addClass("active");
    }                   
    });

    $(window).scroll(function(){
        $('.main-header').toggleClass('scrolled', $(this).scrollTop() > 1);
    });

    $('a[href="#top"]').click(function(){
        $('html, body').animate({scrollTop: 0}, 'slow');
        return false;
    });

    $('.flexslider').flexslider({
        slideshow: true,
        slideshowSpeed: 3000,  
        animation: "fade",
        directionNav: false,
    });

    $('.toggle-menu').click(function(){
        $('.menu-first').toggleClass('show');
        // $('.menu-first').slideToggle();
    });

    $('.menu-first li a').click(function(){
        $('.menu-first').removeClass('show');
    });

    /************** LightBox *********************/
    $(function(){
        $('[data-rel="lightbox"]').lightbox();
    });

});

• javascript
• jquery
• html

• 1 Which line of code does the error occur at? – Eric Guan Commented Feb 17, 2016 at 0:39
• That's the part I can't figure out, it keeps referring to the jQuery, see printscreen prntscr./a494ep – Trickflick Commented Feb 17, 2016 at 1:03
• 1 @Trickflick it's really clear in the error and in the way that jQuery handles parsing of strings passed into $(string). The term "Unrecognized expression" is a jQuery internal error message – charlietfl Commented Feb 17, 2016 at 1:05
• @charlietfl, you were right that it accepts only hashes. I can even input strings such as "test" and those would be right. I tried your solution but this time I got Uncaught Error: Syntax error, unrecognized expression: a[href^=#] – Trickflick Commented Feb 17, 2016 at 1:10

1 Answer 1

problem is quite clear, you can't pass the href value "http://www.google." to $()

Your other href's that are just hashes $('#b') and $('#c') are fine

But $("http://www.google.") is an invalid selector when you try to use it here:

menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
                                     ^^^^^^^

You could exclude it by doing something like:

menuItems = topMenu.find("a[href^='#']"),