jQuery- Add undo button for input
<p>I've added an undo button for text input. when i click on undo, change event fires before click event. </p>

<p>Is there a way to fire click event before change? because i'd like to undo the text inside the input text then call the save method.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.btnUndo').click(function () {
  console.log("undo clicked.")
  var input = $(this).closest('.txtUndoable').find('input');
        $(input).val($(input).attr('data-old-value'));
  });

$('.txtUndoable').change(function () {
  console.log("Save method")

     // Save method 
 })</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.txtUndoable {
    position: relative;
  width:150px;
}

    .txtUndoable .fa {
        position: absolute;
        right: 0;
        padding: 10px;
        /*pointer-events: none;*/
        cursor: pointer;
        color:#26A8FF;
    }

.txtUndoable {
    padding-right: 30px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;


&lt;div class="txtUndoable"&gt;
   &lt;i class="btnUndo fa fa-undo"&gt;&lt;/i&gt;
   &lt;input class="form-control" value="name" data-old-value="name"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>