自定义事件的基础5顶部栏下拉项目

Custom event for Foundation 5 top bar dropdown items

本文关键字：项目 5顶 事件 自定义      更新时间：2023-09-26

我使用基础5顶部栏下拉在一个Aurelia web应用程序。我想添加一个单击事件处理程序到下拉菜单项。我的代码如下所示:

<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch g… webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
<head>
    <meta charset="utf-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title></title>
    <script src="/Scripts/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="/Content/foundation/foundation.css"></link>
    <link rel="stylesheet" href="/Content/foundation/foundation.mvc.css"></link>
    <link rel="stylesheet" href="/Content/font-awesome.min.css"></link>
    <link rel="stylesheet" href="/Content/custom/app.css"></link>
    <script src="/Scripts/modernizr-2.8.3.js"></script>        
</head>
<body>
    <nav class="top-bar fixed" data-topbar role="navigation">
        ...
        <section class="top-bar-section">
            <ul class="left">
                <li class="has-dropdown">
                    <a href="#" title="${activeModule.Description}">
                        ${activeModule.DisplayName}
                    </a>
                    <ul class="dropdown">
                        <ul repeat.for="module of allModules">
                            <li>
                                <a click.delegate="$parent.setActiveModule(module.Name)" data-trash="${$parent.activeModule.Name}">
                                    <strong>${module.DisplayName} </strong> | <em> ${module.Description} </em>
                                </a>
                            </li>
                            <li class="divider">
                            </li>
                        </ul>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
    <div class="page-host row">
    ...
    </div>
    <hr />
    <footer>
        <p></p>
    </footer>
    <script src="/Scripts/foundation/fastclick.js"></script>
    <script src="/Scripts/foundation/foundation.js"></script>
    <script src="/Scripts/foundation/foundation.abide.js"></script>
    <script src="/Scripts/foundation/foundation.accordion.js"></script>
    <script src="/Scripts/foundation/foundation.alert.js"></script>
    <script src="/Scripts/foundation/foundation.clearing.js"></script>
    <script src="/Scripts/foundation/foundation.dropdown.js"></script>
    <script src="/Scripts/foundation/foundation.equalizer.js"></script>
    <script src="/Scripts/foundation/foundation.interchange.js"></script>
    <script src="/Scripts/foundation/foundation.joyride.js"></script>
    <script src="/Scripts/foundation/foundation.magellan.js"></script>
    <script src="/Scripts/foundation/foundation.offcanvas.js"></script>
    <script src="/Scripts/foundation/foundation.orbit.js"></script>
    <script src="/Scripts/foundation/foundation.reveal.js"></script>
    <script src="/Scripts/foundation/foundation.slider.js"></script>
    <script src="/Scripts/foundation/foundation.tab.js"></script>
    <script src="/Scripts/foundation/foundation.tooltip.js"></script>
    <script src="/Scripts/foundation/foundation.topbar.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

但是，每当我单击下拉项时，都不会调用自定义事件处理程序。我测试了同一段代码，把它放在<li class="has-dropdown">外面，直接在<ul class="left">下面，我发现它是工作的。

谁能让我知道我在这里错过了什么?

谢谢。

对于看到这个问题的人，我是这样解决的:

我知道呼叫$(document).foundation();不能正常工作。在使用Aurelia时，我利用视图的生命周期事件来解决这个问题。因此，我在attached事件中添加了对$(document).foundation();的调用，如下所示:

attached() {
    $(document).foundation();
}

就是这样。

相关文章：