JSFiddle - React, Tailwind, and code Playground

by peteorpeter

HTML

<span> the span 
    <a onclick="alert('onclick HTML attritbute fired!')" href="http://www.href-attribute-fired.com">the link</a> 
    wraps the link
</span>

<input type="button" value="click to execute link" />

CSS

span {display: inline-block; padding: 30px; background: #ffc; border: 1px solid #ff3}
a {display: inline-block; padding: 10px; background: #cff; border: 1px solid #3ff}

JavaScript

$('a').click(function() {
    alert("jQuery click fired!");
});

$('span').one("click", function() {
    alert('(span clicked, let us see what other events fire...)');
    $(this).find('a').click();
});

$('input').click(function(){
    $('a').click();
});

// also tried on() and off():
//$('span').on("click", function(){
//    alert('(span clicked, let us see what other events fire...)');
//    $(this).off("click");
//    $(this).find('a').click();
//});