JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<p><a href="http://bugs.jqueryui.com/ticket/5895">jQuery UI #5895</a>: Using <code>button</code> within a <code>change</code> event prevents the <code>click</code> event of a button from firing in Chrome and Safari.  To reproduce:</p>
<ol>
    <li>Type something in the textbox.</li>
    <li>Without losing focus from the textbox click the button with the mouse.</li>
    <li>The <code>click</code> event will not fire.  If you simply click the button without changing the value of the textbox it will.</li>
</ol>

<button>Initial</button>
<input />

CSS

/* Display only, doesn't affect the bug */
p, li { line-height: 1.5; }
p { margin-top: 0; }
ol { margin-bottom: 20px; }
body { padding: 10px; }

JavaScript

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

$( 'input' ).on( 'change', function() {
   $( 'button' ).button( 'option', 'label', 'Changed' ); 
});