JSFiddle - React, Tailwind, and code Playground

by Thiago Braga

HTML

<link rel="stylesheet" href="http://twbs.github.io/bootstrap/dist/css/bootstrap.css">
<div class="container">
    <div class="well">
        <h1>Test</h1>
        <h5>Testing click behaviour</h5>
    </div>
    
    <a href="#" id="normal" class="btn btn-default">Normal</a>
    <a href="#" id="one" class="btn btn-primary">jQuery.one()</a>
    <a href="#" id="disabled" class="btn btn-danger">jQuery.attr('disabled', true)</a>
    
    <pre id="result" class="hide"></pre>
</div>

CSS

.container {
    padding-top: 20px;
}

#result {
    margin-top: 20px;
}

JavaScript

var normal_button = $('#normal'),
    one_button = $('#one'),
    disabled_button = $('#disabled'),
    result = $('#result');

normal_button.on('click', function () {
    result.removeClass('hide').append(normal_button.html() + '<br/>');
});

one_button.one('click', function () {
    result.removeClass('hide').append(one_button.html() + '<br/>');
});

disabled_button.on('click', function () {
    disabled_button.attr('disabled', true);
    result.removeClass('hide').append(disabled_button.html() + '<br/>');
    setTimeout(function () {
        disabled_button.removeAttr('disabled');
    }, 2000);
});