JSFiddle - React, Tailwind, and code Playground

by Jason Williams

HTML

<div id="container">
    <p><a href="#" id="testlink">Test Link</a></p>
</div>
<ul>
    <li><a href="#" id="trigger1">Trigger with .trigger()</a></li>
    <li><a href="#" id="trigger2">Trigger with .triggerHandler()</a></li>
    <li><a href="#" id="trigger3">Trigger using namespace event</a></li>
</ul>

CSS

#container {background-color: #CCCCCC;}

JavaScript

$(function () {
    $('div#container').click(function() {
        alert('#container clicked');
    });
    
    $('a#testlink').on('click.programmatic', function (e) {
        e.preventDefault();
        alert('#testlink clicked');
    });

    $('a#testlink').click(function (e) {
        e.preventDefault();
        alert('Uh oh, we forgot about this function. Could be serious side-effects!');
    });
    
    $('a#trigger1').click(function(e) {
        e.preventDefault();
        $('a#testlink').trigger('click');
    });
    
    $('a#trigger2').click(function(e) {
        e.preventDefault();
        $('a#testlink').triggerHandler('click');
    });

    $('a#trigger3').click(function (e) {
        e.preventDefault();
        $('a#testlink').trigger('click.programmatic');
    });
});