JSFiddle - React, Tailwind, and code Playground

by Zoramite

HTML

<!doctype html>
<head>
    <meta charset="utf-8">

    <title>Testing Button</title>
</head>

<body>

<form id="testForm" action="." method="POST">
    <div id="buttonArea">
        <button id="staticButton" type="button">Static Button</button>
    </div>
    
    <input type="submit" value="Submit" />
</form>
    
</body>
</html>

JavaScript

;(function($){
    $(function(){
        $('#testForm').submit(function() {
            alert('Form was submitted.');
            
            return false;
        });
        
        $('#staticButton').click(showType);
        
        $('<button />', {
            type: 'button',
            text: 'Test Button'
        })
            .click(showType)
            .appendTo($('#buttonArea'));
        
        $('<button />', {
            text: 'Test Button 2'
        })
            .attr('type', 'button')
            .click(showType)
            .appendTo($('#buttonArea'));
    });
    
    function showType() {
        alert('Button has a type of: ' + $(this).attr('type'));
        
        return false;
    }
})(jQuery);