Search code examples
javascriptcsszurb-foundationzurb-foundation-5aurelia

Custom event for Foundation 5 top bar dropdown items

I am using Foundation 5 top bar drop down in an Aurelia web app. I want to add on click event handler to the drop down menu items. My code looks like below:

<!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>

However whenever I am clicking the drop down item the custom event handler is not invoked. I tested the same piece of code by placing it outside the <li class="has-dropdown"> and directly under <ul class="left"> and I found it to be working.

Can anyone please let me know what I am missing here?

Thanks.

Solution

  • For anyone looking at this question, here is how I solved it:

    I understood that the call to $(document).foundation(); is not working properly. As I am using Aurelia, I leveraged the lifecycle events of views for solving this issue. Thus, I added the call to $(document).foundation(); in the attached event like below:

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

    And that's it. Hope it helps.