Question
How can I add an additional click event on a CoreUI element.
As far as my debugging goes, the main problem is that CoreUI a lot of event.stopPropagation(); uses. This seems to destroy any further added click event.
Workaround
A hack I found was to comment out line 2293 in the coreui.js.
It's interesting, as this seams to be changed with Version 3.3.0. Even more confusing is, that version "3.2" (really 3.2.2) on https://unpkg.com has already this changes (s. code snippet below).
Example
In the code snippet you can see that the menu opens/closes correctly but the additional click event doesn't get trigger.
$(document).ready(function () {
// Trigger when sidebar change, only works with hack of coreui.js
$(document).on('click', '.c-class-toggler', function (event) {
console.log('hello world!');
});
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/@coreui/[email protected]/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">
<div class="c-sidebar-brand d-md-down-none">
<a class="c-sidebar-brand-full h4" href="#">
Example
</a>
</div>
<ul class="c-sidebar-nav ps m-4">
<li class="c-sidebar-nav-item"><h3>Menu<h3></li>
</ul>
</div>
<div id="app" class="c-wrapper">
<header class="c-header c-header-fixed px-3">
<button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
Menu
</button> <pre class="ml-2 mt-4"><- additional click event is not working</pre>
<button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
Menu
</button>
<ul class="c-header-nav ml-auto">
</ul>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>Content</h2>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/@coreui/[email protected]/dist/js/coreui.min.js"></script>
</body>Note: It seems like I'm not the only one with this issue: https://github.com/coreui/coreui/issues/155
I just run again over my question, the whole thing works also without my described hack.
The trick is to hook on existing JS events.
The debugger console normal show you the exciting events, eg. in case of the
sitebarthere is aclasstoggleevent you can hook on (s. example in jsfiddle or below).One issue withe
coreuiis that the events have often different names to the normal bootstrap events.