Select menu link

Question

I’m using javascript to select the menu to open the page I selected, the menu is already being selected but is not opening the pages. And the click event is working when I click on the menu.

$(document).ready(function() {
$('ul.form li a').click(

    function(e) {
        e.preventDefault(); // prevent the default action
        e.stopPropagation; // stop the click from bubbling
        $(this).closest('ul').find('.selected').removeClass('selected');
        $(this).parent().addClass('selected');
        alert('Chegou !!'); // Para testar o evento...
    });});

Menu.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">

<nav class="aw-menu">
    <ul class="form">
        <li class="selected">
            <h:link class="a" outcome="/page/main.xhtml"><i class="fa  fa-fw  fa-home"></i>Início</h:link>
        </li>

        <li>
            <h:link outcome="/page/req/cons_requerimento.xhtml"><i class="fa  fa-fw  fa-newspaper-o"></i>Bônus Pecuniário</h:link>

        </li>                   

        <li>
            <h:link outcome="/page/seg/cons_usuario.xhtml"><i class="fa  fa-fw  fa-user"></i>Usuários</h:link>
        </li>

        <li>
            <h:link outcome="/page/seg/form_usuario_alt_senha.xhtml"><i class="fa  fa-fw  fa-lock"></i>Alterar Senha</h:link>
        </li>

    </ul>
</nav>

Answer 1

Test by taking the href attribute from the rendered link this way:

$(document).ready(function() {
$('ul.form li a').click(
    function(e) {
        e.preventDefault(); // prevent the default action
        e.stopPropagation; // stop the click from bubbling
        $(this).closest('ul').find('.selected').removeClass('selected');
        $(this).parent().addClass('selected');
        var href = this.getAttribute('href');
        window.location.href = href;
    });});