Не работают java script в Java Server Faces

Делаю сайт с помощью технологии JSF, у меня есть template, который имеет следующий код:

<h:body>
    <div class="header">
        <ui:insert name="header">
            <!--Default header-->
            <ui:include src="header.xhtml"/>
        </ui:insert>
    </div>
    <div class="main">
        <ui:insert name="content">
            <!--here will content-->
        </ui:insert>
    </div>
    <div class="footer">
        <ui:insert name="footer">
            <!--Default footer-->
            <ui:include src="footer.xhtml"/>
        </ui:insert>
    </div>
    <!--JS include-->
    <ui:insert name="script">
        <!--Here will custom script-->
    </ui:insert>
    <h:outputScript library="js" name="header_script.js"></h:outputScript>
    <h:outputScript library="js" name="jquery-3.3.1.min.js" ></h:outputScript>
</h:body>

Проблема в том, что JavaScript, из файла header_script.js нужный для страницы header.xhtml не отрабатывает. Вот код скрипта:

$('.open_menu').click(function () {
        $('.menu_2').show();
    });
    $(document).click(function (event) {
        if(!($(event.target).closest('.menu_2').length || $(event.target).closest('.open_menu').length)){
            $('.menu_2').hide();
        }
        if($(event.target).closest('.search_line').length){
            $('.search_line').hide();
        }
    });
    $('.search_img').click(function (event) {
        if($('.nav').css('display') != 'none'){
            $('.nav').hide(300);
            $('.search_line').show(300);
        }else{
            $('.nav').show(300);
            $('.search_line').hide();
        }
    });

А вот соответсвенно код файла header.xhtml:

<ui:composition>
            <div class="top-bar">
                <h:graphicImage styleClass="logo_img" library="images" name="science-logo.png" alt="logo"/>
                <h1 class="unselectable">SCIENCE</h1>
                <div class="wrap_top">
                    <div class="nav">
                        <ul class="navigation">
                            <h:link href="#"><li class="nav-item">ГЛАВНАЯ</li></h:link>
                            <h:link href="#"><li class="nav-item">НАПИСАТЬ</li></h:link>
                            <h:link href="#"><li class="nav-item">ПОМОЩЬ</li></h:link>
                            <h:link href="#"><li class="nav-item">О НАС</li></h:link>
                        </ul>
                    </div>
                    <h:form styleClass="search_line" method="get" action="/">
                        <h:inputText styleClass="search_input" name="search_string" value="" placeholder="Поиск..."/>
                    </h:form>
                </div>
                <h:graphicImage styleClass="search_img" library="images" name="search.png" alt="search"/>
                <ul  class="menu-bar">
                    <li class="menu">
                        <div class="person">
                            <h:graphicImage styleClass="user_img" library="images" name="user.png" alt="user"/>
                            <div class="open_menu">admin</div>
                        </div>
                        <ul class="menu_2">
                            <h:link href=""><li class="menu_item">Профиль</li></h:link>
                            <h:link href=""><li class="menu_item">Настройки</li></h:link>
                            <h:link href=""><li class="menu_item">Выход</li></h:link>
                        </ul>
                    </li>
                </ul>
            </div>
        <h:outputScript library="js" name="header_script.js"></h:outputScript>
    </ui:composition>

Подключать скрипт к самому header.xhtml уже пробовал, не работает. Подскажите пожалуйста, что я не так делаю. (Если не делать всё в jsf, то обычная html страница прекрасно отрабатывает)