Question

我在Aurelia网络应用程序中使用Foundation 5顶栏。我想在下拉菜单项中添加click事件处理程序。我的代码如下所示：

<!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">之下，然后我发现它正常工作。

任何人都可以让我知道我在这里缺少什么吗？

感谢。

Answer 1

对于任何看过这个问题的人，我都是这样解决的：

我了解到对$(document).foundation();的调用无效。当我使用Aurelia时，我利用视图的生命周期事件来解决此问题。因此，我在$(document).foundation();事件中添加了对attached的调用，如下所示：

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

就是这样。希望它有所帮助。

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

1 个答案: