Add a JS click event on a CoreUI element on .c-class-toggler
Question
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/coreui@3.2/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/coreui@3.2/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
1 answers
solution1
0 ACCPTED 2021-06-25 07:37:34
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 sitebar there is a classtoggle event you can hook on (s. example in jsfiddle or below).
One issue withe coreui is that the events have often different names to the normal bootstrap events.
$(document).ready(function () { // Triggers when existing sidebar events are called $('#sidebar').on('classtoggle', function (event) { console.log('hello world;'). $('.working');append(';'); }); });
<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/coreui@3.2/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 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> <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="working ml-2 mt-4"><- additional click event works when hooked to existing events</pre> </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/coreui@3.2/dist/js/coreui.min.js"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.