JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>jquery strange click demo</title>
    </head>
    <body>
        <span>Click the checkbox and every trigger and see the strange behavior of jQuery.</span>
        <br/>
        <input type="checkbox" class="evil" id="boss" />
        <label for="boss">I'm a HTML for trigger</label>
        <br/>
        <a href="#" class="classic">I trigger a classic "click" method.</a>
        <br/>
        <a href="#" class="api">I trigger a jQuery "click" method.</a>
        <br/>
        <div id="log" style="border: 1px solid black"></div>
    </body>
</html>

JavaScript

$(function(){
    $(document).on("click", ".classic", function(){
        $("#boss").get()[0].click();
        return false;
    }).on("click", ".api", function(){
        $("#boss").click();
        return false;
    }).on("click", ".evil", function(event){
        var $this = $(this);
        if($this.is(":checked")){
            $("#log").append($("<span>I'm checked when the event fires.</span><br/>"));
        }else{
            $("#log").append($("<span>I'm unchecked when the event fires.</span><br/>"));
        }
        event.stopPropagation();
    });
})