JSFiddle - React, Tailwind, and code Playground

by francisfortier

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<fieldset id="case1">
    <input type="text" />
    <span>Click</span>
</fieldset>

CSS

fieldset > span {
    width: 6em;
}

JavaScript

var lastTarget;

$(document.body).mousedown(function(event) {
    lastTarget = event.target;
});

function prepareCase(fieldset, handler) {
    var input = fieldset.children('input:first');
    var span = fieldset.children('span:first');

    span.button().unbind('click.button').bind('mouseup', function(event) {
        if (!span.button('option', 'disabled') && lastTarget === event.target) {
            alert('click');
        }
    });

    input.change(function(event) {
        handler(input, span, event);
    });
};

prepareCase($("#case1"), function(input, span, event) {
    span.button('option', 'label', input.val());
});