Google Plus as a menu not working in size

Question

I have this menu inspired by this question. Creating a menu similar to Google Plus . It is based on the answer of https://stackoverflow.com/a/312929/ and this fiddle: http://jsfiddle.net/CTAKR/ , which uses the select menu. I updated my styles and list items. It seems to work fine, but the menu only works on boot, not on size, and I can't figure it out:

Pay attention to how it works only at boot, so the window size is narrower, then it is updated, then it will work, otherwise it will not work:

http://jsbin.com/hogad/1/ - does not work with resizing

Question: how to make this work also with resizing.

The fixed version is fixed here: http://jsbin.com/zijot/1/edit

WRONG jQuery:

// Reference: /questions/1552022/responsive-menu-with-resizing/4665500#4665500 

// http://jsfiddle.net/CTAKR/ -- inspiration

var items = [{
    text: "Home",
    link: "#"
}, {
    text: "Books",
    link: "#books"
}, {
    text: "Blog",
    link: "#blog"
}, {
    text: "About Us",
    link: "#about"
}, {
    text: "Long Title Goes Here",
    link: "#support"
}, {
    text: "Support2",
    link: "#support"
}, {
    text: "Support3",
    link: "#support"
}];



function buildMenu() {
    var i, item, prevElem,
        listMenu = "", //? what is this for?
        selectMenu = ""; //? what is this for?

    $("#nav").html('').append('<ul class="navigation"></ul><ul class="more-menu"><li class="has-children"><a href="#">More</a><ul></ul></li></ul>');

    $('.more-menu ul').append('<li><a href="link.html">Gallery</a></li><li><a href="link.html">Contact</a></li>');

    for (i = 0; i < items.length; i++) {
        item = items[i];
        var pW = prevElem ? prevElem.outerWidth() : 0;
        var mW = $('.more-menu').outerWidth() + $('.navigation').outerWidth();
        if (mW + pW + 50 >= $('.menu-container').innerWidth()) {
            $('.more-menu ul').append('<li><a href="' + item.link + '">' + item.text + '</a></li>');
        } else {
            prevElem = $('<li><a href="' + item.link + '">' + item.text + '</a></li>').appendTo('.navigation');
        }
        if ($('.more-menu ul li').length < 1) {
            $('.more-menu').hide();
        } else {
            $('.more-menu').show();
        }
    }
}


/* the problem is that it not working on resize */
$(document).ready(function(e) {
    buildMenu();
    $(window).resize(function(e) {
        buildMenu();
    });
});

// Toggle the UL UL
$(document).ready(function() {
    $(".has-children a").click(function() {
        // $(this).next('ul').toggleClass("open");
        $(this).parent('li').toggleClass("open-menu");
    });
});

// Hide when clicked/tapped outside 
$(document).on('touchstart click', function(event){
    if(!$(event.target).closest('.menu-container').length) {
        if($('.menu-container ul ul').is(":visible")) {
            $('.has-children').removeClass("open-menu");
        }
    }        
});

HTML:

<div class="menu-container">
<nav id="nav"><!--menu draws here --></div>
</nav>  

CSS

.menu-container {
    max-width: 900px;
    margin: 0 auto;
}

#nav {
    display: block;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
    font-size: 0px; /*remove spacing */
}

#nav ul {
    list-style: none;
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

#nav > ul > li {
    display: inline-block;
    position: relative;
}

#nav > ul > li {
    margin-right: 2px
}

#nav > ul li a {
    display: inline-block;
    background: #2C3C53;
    color: #fff;
    padding: 0 20px;
    line-height: 50px;
    text-decoration: none;
}

#nav a:hover,
#nav .open-menu > a {
    background: red
}

#nav .more-menu ul {
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: 54px;
    opacity: 0;
    right: 0;
    text-align: left;
    transition: opacity .5s ease-in-out;
}

#nav .open-menu ul {
    height: auto;
    overflow: visible;
    opacity: 1;
}

.more-menu ul li {
    display: block
}

.more-menu ul li:not(:last-child) {
    margin-bottom: 2px
}

#nav .more-menu ul a {
    display: block;
    line-height: normal;
    padding: 10px 20px;
    width: 100%;
    min-width: 10em;
}

.has-children > a:after {
    font-family: 'FontAwesome';
    content: "\f067";
    position: relative;
    display: inline;
    line-height: 1;
    font-size: 10px;
    padding-left: 10px;
    top:-1px;
}

.has-children.open-menu > a:after { content: "\f068" }

Answer 1

I believe your problem is that the navigation Moredid not show your children, because you are dynamically generating the navigation. So, you should use delegation delegation for your click function as follows:

$(document).ready(function() {
    $("body").on('click','.has-children a',function() {
        // $(this).next('ul').toggleClass("open");
        $(this).parent('li').toggleClass("open-menu");
    });
});