JSFiddle - React, Tailwind, and code Playground

by Kamran Ayub

HTML

<ul id="global-nav">
    <li>Heading 1
        <ul class="inner">
            <li><a href="#inner">Inner Link</a></li>
            <li><a href="#inner2">Inner Link</a></li>
        </ul>
    </li>
    <li>Heading 2
        <ul class="inner">
            <li><a href="#inner3">Inner Link</a></li>
            <li><a href="#inner4">Inner Link</a></li>
        </ul>
    </li>
</ul>

<p id="clicked">Clicked item</p>

JavaScript

$(function () { // document ready
    
    var handleGlobalNavInnerClick = function (e) {
        var $link = $(this),
            href = $link.attr("href");
        
        $("#clicked").text(href + " clicked!");
        
        /*******
        // Return TRUE in production! This is just for illustration.
        //******/
        return false;
    };
    
    $("#global-nav").on('click', '.inner a', handleGlobalNavInnerClick);
    
});