title: Automatically set focus on dynamically loaded input field
body: <p>Working with jQuery, I'm trying to do a .focus() on an input field after a AJAX call, but with no luck so far.</p>
  
  <p>Little snippet to give the idea:</p>
  
  <pre><code>$.ajax({
      type: "GET",
      url: url,
      success: function (data) {
          $('#myModal').remove();
          $('body').append(data);
          $('#myModal').modal('show');
      },
      complete: function(){
          $('#input-new-saldo').focus();
      }
  });
  </code></pre>
  
  <p>Here's the HTML: (loaded by AJAX and appended to body)</p>
  
  <pre><code>        &lt;form id="form-update-saldo"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="sr-only" for="input-new-saldo"&gt;Saldo (in euro)&lt;/label&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" class="form-control input-lg" id="input-new-saldo" name="new_saldo" value="&lt;?php echo $saldo['saldo']; ?&gt;"&gt;
                          &lt;div class="input-group-addon"&gt;€&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="submit" class="btn btn-success" id="submit-update-saldo"&gt;Update saldo&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p><strong>What I have tried so far:</strong></p>
  
  <ol>
  <li>Seen throug the other threads addressing the same type of issue but the solutions didn't seem to help on this. (ex. 
  <a href="https://stackoverflow.com/questions/24509158/javascript-focus-does-not-work-on-dynamically-loaded-input-box">Javascript focus does not work on dynamically loaded input box</a>
  <a href="https://stackoverflow.com/questions/25643236/jquery-focus-not-working-on-a-page-loaded-with-ajax">jquery focus not working on a page loaded with ajax</a>)</li>
  <li>Made sure the element exist during the call. It indeed does: $('#input-new-saldo'); gives positive output.</li>
  <li>Made sure the call is addressed to correct element. It indeed does: $('#input-new-saldo').val('test'); changes the value of the element.</li>
  </ol>
  
  <p>However, calling $('#input-new-saldo').focus(); does nothing, nor gives any JS error.</p>
  
  <p>To me it seems the focus is somehow lost during the AJAX call to somewhere outside my application and I'm not able to steal it back in the callback function. Would that make sense and how could it possible be solved?</p>