JSFiddle - React, Tailwind, and code Playground

by Todd Levy

HTML

<h2>Basic Example</h2>
<a href="#" class="my_class">Example 1</a>

<hr />

<h2>Descendant Selector Example</h2>
<ul class="my_wrapper_class">
    <li><a href="#">Example 2a</a></li>
    <li><a href="#">Example 2b</a></li>
    <li><a href="#">Example 2c</a></li>
</ul>

<hr />

<h2>Alert Example</h2>
<div class="alert">
   This is an alert <a href="#" class="close">x</a>
</div>

JavaScript

jQuery(function($){
    $(".my_class").on("click", myLinkFunction);
    
    $(".my_wrapper_class").on("click","a", myLinkFunction);    
    
    function myLinkFunction(event){
        event.preventDefault();
        event.stopPropagation();
        alert('hello, world!' + ' \ntext = ' + $(this).text() + ' \nhref = ' + $(this).attr('href'));
    }
    
    $alertbox = $('.alert');
    $alertbox.on('click', 'a.close', hideAlert);
        
    function hideAlert(event){
        event.preventDefault();
        event.stopPropagation(); 
        $alertbox.slideUp();
    }
});