JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<script src="http://jasny.github.io/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://jasny.github.io/bootstrap/dist/css/bootstrap.min.css">
<button type="submit" class="btn btn-default" data-confirm="Buy" data-toggle="confirm">$50</button>

<input type="submit" class="btn btn-default" value="$50" data-confirm="Buy" data-toggle="confirm">

CSS

body { padding-top: 100px; text-align: center; }
.btn[data-toggle=confirm]:disabled { cursor: pointer; }

JavaScript

$(document).on('mousedown', '[data-toggle=confirm]', function(e) {
    var button = $(this);
    if (button.data('confirm-original')) return;
    
    button.attr('disabled', true);
    
    if (button.is('input')) {
        button.data('confirm-original', $(this).val());
        button.val(button.data('confirm'));
    } else {
        button.data('confirm-original', $(this).html());
        button.text(button.data('confirm'));
    }
    
    $(document).one('mouseup', function(e) {
        button.attr('disabled', false);
    });
    
    $(document).one('click', function(e) {
        if ($(e.target).is(button)) return;
        
        if (button.is('input')) button.val(button.data('confirm-original'));
          else button.html(button.data('confirm-original'));
        
        button.data('confirm-original', null);
    });
});

$('button').on('click', function() {
    alert('Buy something');
});