JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<script src="http://getfirebug.com/firebug-lite-debug.js"></script>
<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
        console.log(event.target);
        console.log(data);
        console.log('custom event received: ' + $(data).attr('id') + ' (expected value: myform)');
    }
};
    
$('#myform').bind('customEvent', eventHandler);
   
$('#myform').click(function(event){
    event.stopPropagation();
    event.preventDefault();
    console.log(this);
   
    $.event.trigger('customEvent', [this]);
});