代码之家 › 专栏 › 技术社区 › wittich Manish Shrivastava

在上的CoreUI元素上添加单击事件。c级开关

core-ui dom-events jquery javascript

0

wittich Manish Shrivastava · 技术社区 · 4 年前

问题

如何添加额外的 click 在一个 CoreUI 要素

就我的调试而言,主要问题是 CoreUI 很多 event.stopPropagation(); 使用。这似乎破坏了任何进一步的补充 点击 事件

变通方法

我发现的一个黑客方法是将其注释掉 line 2293 in the coreui.js .

这很有趣,因为3.3.0版可能会改变这一点。更令人困惑的是,这个版本“3.2”(实际上是3.2.2)还在继续 https://unpkg.com 已经进行了更改(下面是代码片段)。

实例

在代码片段中,您可以看到菜单正确打开/关闭,但 附加的 点击 事件不会触发。

screenshot dev console event

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

0 回复 | 直到 4 年前

1

0

wittich Manish Shrivastava 3 年前

我只是再次重复我的问题,整个过程也没有我所描述的黑客行为。

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

调试器控制台将向您显示激动人心的事件,例如 sitebar 有一个 classtoggle 你可以挂接的事件(例如 jsfiddle 或以下)。

关于E的一个问题 coreui 事件的名称通常与正常引导事件不同。

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