using bootstrap 3.37 header dropdown menu and tranlsating jquery to knockoutJS

I was looking at this article to apply header menu with dropdowns in my mvc5 knockoutjs solution.

https://jdmdigital.co/news/codex/bootstrap-3-secondary-dropdown-menu/

The frontend it looks nice, and it is ok in my solution, however, I cant figure it out how to bind js section to work. Now when I click on my dropdown parent item, nothing happens, because the js code is not working.

here is my setup of the js (knockoutjs) file.

define(['durandal/system', 'plugins/router', 'durandal/services/logger', 'knockout', 'common', 'plugins/dialog', 'durandal/binder', 'fastclick'],
    function (system, router, logger, ko, common, dialog, binder, fs) {
        var shell = {
            activate: activate,
            router: router,
        };

        // Make Dropdown Submenus possible
        $('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function (e) {
            $('.dropdown-submenu ul').removeAttr('style');
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
        // Clear Submenu Dropdowns on hidden event
        $('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
            $('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
        });


        //...
        //...
        //OTHER INIT METHODS (not in the scope for this question)
        //#region Internal Methods
        function activate() {
            var result = registerRoutes();
            //setRouteGuard();
            if (window.cordova) {
                window.document.addEventListener("deviceready", function () {
                    shell.refreshUserData(true);
                    shell.changeLanguage();
                });
            } else {
                shell.refreshUserData(true);
                shell.changeLanguage();
            }
            shell.isLoading.subscribe(function (newValue) {
                //if something gone wrong
                if (newValue) {
                    setTimeout(function () {
                        //shell.isLoading(false);
                    }, 10000);
                }
            });

            if (router.activeInstruction().config.moduleId == "viewmodels/parentschedule") {
                if (shell.isAnonymousUser() == true) {
                    shell.isClient(false);
                    shell.isEmployee(false);
                }
                else {
                    shell.isClient(true);
                    shell.isEmployee(true);
                }
                //console.log("test");
            }

            return result;
        }


        function route(r, moduleId, name, visible, alwaysVisible, role, condition) {
            var self = this;
            self.route = r;
            self.moduleId = moduleId;
            self.title = name;
            self.visible = visible;
            self.nav = true;
            self.role = role;
            self.condition = condition;
            self.mouseover = ko.observable(false);
            self.onhover = function () {
                self.mouseover(!self.mouseover());
            };
            self.goToPage = function () {
                router.navigate(this.hash);
            };
            self.alwaysVisible = alwaysVisible;
            self.isTouched = ko.observable(false);
            self.setTouched = function () {
                self.isTouched(true);
                return true;
            }
            self.setUnTouched = function () {
                setTimeout(function () {
                    self.isTouched(false);
                }, 200);
                return true;
            }
            self.isActiveMenuItem = ko.computed(function () {
                return router.activeInstruction() &&
                    router.activeInstruction().fragment.indexOf(self.route) > -1
            });
            return self;
        }
        //#endregion
    });

from using bootstrap 3.37 header dropdown menu and tranlsating jquery to knockoutJS