Не срабатывает кнопка поиска в Django

Question

В простом шаблоне html + css + js все отрабатывает отлично, но вставив этот код в Django проект кнопка поиска не кликабельна вообще. И я не вижу ни какой ошибки.

В проекте Django все статические файлы подключаются корректно, в консоли все статик файлы с кодом 200.

Должно открываться такое окно при клике на иконку:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/responsive.css' %}">
    <link rel="stylesheet" id="jssDefault" href="{% static 'css/color.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <title></title>
</head>
<body>
    <div class="search-box" id="searchWrapper">
        <div id="close-button"></div>
        <div class="container">
            <form action="#">
                <div class="greeting-text"><span class="greeting"></span></div>
                <div class="input-wrapper">
                    <input type="text" placeholder="type your keyword" autofocus>
                </div>
            </form>
        </div>
    </div> <!-- /.search-box -->
<div class="top-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-12">
                <div class="news-bell">Recent Post :</div>
                <div class="breaking-news easyTicker">
                    <div class="wrapper">
                        <div class="list"><a href="blog-details-v1.html">One morning, when Gregor Samsa woke from troubled dreams.</a></div>
                        <div class="list"><a href="blog-details-v1.html">CNN's Kyung Lah sits down with Japan's World Cup-winning.</a></div>
                        <div class="list"><a href="blog-details-v1.html">Song Byeok had every reason to be pleased with his success.</a></div>
                    </div> <!-- /.wrapper -->
                </div> <!-- /.breaking-news -->
            </div>
            <div class="col-lg-4 col-12">
                <ul class="social-icon text-right">
                    <li class="icon"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li class="icon"><a href="#"><i class="fab fa-twitter"></i></a></li>
                    <li class="icon"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                    <li class="icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    <li class="search-button">
                        <button class="search" id="search-button"><i class="fas fa-search"></i></button>
                    </li>
                </ul>
            </div>
        </div> <!-- /.row -->
    </div> <!-- /.container -->
</div> <!-- /.top-header -->


    <script src="{% static 'vendor/jquery.2.2.3.min.js' %}"></script>
    <!-- Popper js -->
    <script src="{% static 'vendor/popper.js/popper.min.js' %}"></script>
    <!-- Bootstrap JS -->
    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
    <!-- Style-switcher  -->
    <script src="{% static 'vendor/jQuery.style.switcher.min.js' %}"></script>
    <!-- jquery-easy-ticker-master -->
    <script src="{% static 'vendor/jquery-easy-ticker-master/jquery.easy-ticker.min.js' %}"></script>
    <!-- jquery easing -->
    <script src="{% static 'vendor/jquery.easing.1.3.js' %}"></script>
    <!-- Font Awesome -->
    <script src="{% static 'fonts/font-awesome/fontawesome-all.min.js' %}"></script>
    <!-- menu  -->
    <script src="{% static 'vendor/menu/src/js/jquery.slimmenu.js' %}"></script>
    <!-- owl.carousel -->
    <script src="{% static 'vendor/owl-carousel/owl.carousel.min.js' %}"></script>
    <!-- Fancybox -->
    <script src="{% static 'vendor/fancybox/dist/jquery.fancybox.min.js' %}"></script>
    <!-- Youtube Video -->
    <script src="{% static 'vendor/jquery.fitvids.js' %}"></script>
    <script src="{% static 'js/theme.js' %}"></script>
</body>
</html>

Куда копать не пойму. Так как нет ошибки, смотрю в инспекторе Chrome.

БЛОГ НА HUSL

Не срабатывает кнопка поиска в Django

Ответы (0 шт):