JSFiddle - React, Tailwind, and code Playground

by djesse

HTML

<p>Click on the gray area to trigger a custom event!</p>
<form id="myform">
    <label for="input1">dummy</label>
    <input type="text" id="input1" value=""/> 
</form>

CSS

form {
    background: #eee;
    padding: 20px;
}

p {
    margin-bottom: 1em;
}

JavaScript

var eventHandler = function(event,data) {   
    if (data) {
        // alert should output the form id 'myform' .. but doesn't on jQuery 1.5.x
        alert('custom event received: ' + $(data).attr('id'));
    }
};
    
$(document).bind('customEvent', eventHandler);
   
$('#myform').click(function(event){
    event.stopPropagation();
    event.preventDefault();

    alert('\'data\' for custom event: ' + $(this).attr('id'));

    // the form element is provided as data for the custom event ...
    $.event.trigger('customEvent',this);
});