Родительский и дочерний слушатель событий

Я создаю веб-страницу, которая использует шаблоны начальной загрузки, jquery и inspinia.

Я использую 3 файла, а именно index.html - куда я импортирую все свои скрипты

<body ng-controller="MainCtrl" class="">

    <div id="wrapper">
        <div ng-include="'/app/components/navigation/navigation.html'"></div>
        <div ng-include="'/app/components/header and footer/headerFooter.html'"></div>
    </div>
</body>

<!-- JS -->
<script type="text/javascript" src="./assets/node_modules/jquery/dist/jquery.js"></script>
<script src="./assets/js/inspinia.js"></script>

<script type="text/javascript" src="./assets/node_modules/angular/angular.js"></script>
<script type="text/javascript" src="./assets/node_modules/bootstrap/dist/js/bootstrap.js"></script>

navigation.html - где находится моя боковая панель headerFooter.html - где находится кнопка для переключения боковой панели

inspinia.js - где находится слушатель события

$('.navbar-minimalize').on("click", function (event) {
    $("body").toggleClass("mini-navbar");
    SmoothlyMenu();

});

Вопрос в том, почему всякий раз, когда я нажимаю кнопку, боковая панель не превращается в мини-навигацию (класс не применяется), это такая установка.

но если все элементы div находятся в индексе и не используются ng-include кнопка переключается правильно.

Кстати: я использую загрузчик 3.xx

Источник

1 ответ

Решение

Изменить:

$('.navbar-minimalize').on('click, function() {});

чтобы:

$('body').on('click', '.navbar-minimalize', function() {});

Angular вставляет ваш HTML во время выполнения, чтобы ваш код jQuery не знал о вашей DOM при запуске.

Источник
Другие вопросы по тегам