title: onchange event fires after onmousedown event
body: <p>I am using a jQuery and Ajax to dynamically generate the form elements.
  so accordingly my code generates the elements and all working fine.</p>
  
  <p>now I have an <code>onchange</code> event on each textbox which fires on focus out with value changed.</p>
  
  <p>Also, I have a save button which has an <code>onmousedown</code> event to post the form data.</p>
  
  <p>Code I am using:</p>
  
  <p>(HTML code)</p>
  
  <pre><code>&lt;div id="form"&gt;
      &lt;input type="text" class="vchange" /&gt;
      &lt;input type="text" class="vchange" /&gt;
  
      &lt;a href="#" class="btn btn-success vsubmit" onmousedown="return false;"&gt;Submit&lt;/a&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(document).ready(function () {
          $('#form').on('change', '.vchange input[type=text]', function () {
              //ajax post back code to save textbox data in database.
          });
          $('#form').on('mousedown', '.vsubmit', function () {
              $("#form").change(); //updated code as per suggestion
              let choice = confirm("Are you sure u want to submit the form?");
              if (choice) ? alert('Thank you.') : alert('cancelled.');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, the problem is the <code>mousedown</code> event is called before the <code>onchange</code> event and so the data is not saved in the table.</p>