Parent and child event listener

Question

I am creating a web page that uses bootstrap, jquery and inspinia template.

I use 3 files namely index.html - Where I import all my scripts

<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 - Where my side bar is in place headerFooter.html - Where the button for sidebar toggle is place

inspinia.js - where the event listener is place

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

});

The question is, Why does whenever I press the button the side-bar doesn't turn into mini-navbar (class not applying) is this kind of setup.

but if all the div element is in index and not using ng-include the button is toggling properly.

BTW: I am using bootstrap 3.xx

score 1 · Accepted Answer · answered Jul 27 '18 at 12:50

1

Change:

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

to:

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

Angular insert your HTML at runtime, so your jQuery code doesn't know about your DOM on start.

answered Jul 27 '18 at 12:50

mwl

1,448
14
18

Yes it works! Can you explain further, is my angularjs and jquery contradicting to each other? – aRyhan Jul 27 '18 at 12:56
1

In simple words - your jQuery runs before Angular, so `$('.navbar-minimalize')` don't return any element. – mwl Jul 27 '18 at 13:00
My code works, because it uses event delegation, read more here: http://api.jquery.com/on/#direct-and-delegated-events – mwl Jul 27 '18 at 13:01
The most important part: „Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on().” – mwl Jul 27 '18 at 13:02
1

I get it now, I tried interchanging the script call of angular and jquery, it also works. Therefore I don't need to change anything from the Inspinia template. Thank you so much. – aRyhan Jul 27 '18 at 13:11

Parent and child event listener

1 Answers1