在 .c-class-toggler 上的 CoreUI 元素上添加 JS 单击事件

Question

问题

如何在 CoreUI 元素上添加额外的 click 事件。

就我的调试而言，主要问题是 CoreUI 很多 event.stopPropagation(); 使用。这似乎会破坏任何进一步添加的 click 事件。

解决方法

我发现的一个技巧是注释掉 line 2293 in the coreui.js。

这很有趣，因为这个接缝将在 3.3.0 版本中更改。更令人困惑的是，https://unpkg.com 上的版本“3.2”（实际上是 3.2.2）已经发生了这种变化（下面的代码片段）。

例子

在代码片段中，您可以看到菜单 opens/closes 正确，但 additional click 事件没有触发。

$(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>

注意：看来我不是唯一遇到此问题的人：https://github.com/coreui/coreui/issues/155

Answer 1

我只是运行再次回答我的问题，即使没有我描述的 hack，整个事情也能正常工作。

诀窍是挂钩现有的 JS 事件。

调试器控制台正常向您显示激动人心的事件，例如。在 sitebar 的情况下，有一个 classtoggle 事件你可以挂钩（例如 jsfiddle 或以下的例子）。

coreui 的一个问题是事件的名称通常与正常的 bootstrap 事件不同。

$(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>

在 .c-class-toggler 上的 CoreUI 元素上添加 JS 单击事件

Add a JS click event on a CoreUI element on .c-class-toggler

javascript

jquery

dom-events

core-ui

问题

解决方法

例子