title: Dynamically created element's ID in variable
body: <p>I have a bootstrap modal which loads up and as it's loading it, gets the form from server:</p>
  
  <pre><code>$('#edit-post-modal').on('show.bs.modal', function (e) {
      var postID = e.relatedTarget.dataset.post;
  
      $.get('edit' + '/' + postID, function (data, status) {
          form.html(data);
      });
  
      var submitURL = e.relatedTarget.dataset.url;
      form.attr("action", submitURL);
  });
  </code></pre>
  
  <p>My ajax function accepts an <code>alertElement</code> parameter which is the ID of the element where the alert should be displayed.</p>
  
  <pre><code>function doAjax(form, alertElement) {
  
    $.ajax({
       type: form.attr('method'),
       dataType: 'JSON',
       url: form.attr('action'),
       data: form.serialize(),
       success: function (data) {
  
         alertElement.html(data);
  
       },
  }
  </code></pre>
  
  <p>And I can call the doAjax() function like so:</p>
  
  <pre><code>var form = $('#form-post');
  var alertElement = $('#report-alert-field');
  
  // ajax request to server
  doAjax(form, alertElement);
  </code></pre>
  
  <p>As you can see, after the ajax is done, it is supposed to change the alert text to the text from database. If the alert element is not previously loaded from server, it works fine, but it does not work if it's dynamic.</p>
  
  <p>How can I fix this?</p>
  
  <p>Also when I do console.log in ajax <strong>success</strong> method, I get two different things for the same thing.</p>
  
  <pre><code>// These two don't output the same thing
  
      console.log($('#report-alert-field'));
      console.log(alertElement);
  </code></pre>
  
  <p><code>console.log($('#report-alert-field'));</code> outputs the following:</p>
  
  <blockquote>
    <p>[div#report-alert-field, context: document, sector: "#report-alert-field"]
    0
    :
    div#report-alert-field
    context
    :
    document
    length
    :
    1
    selector
    :
    "#report-alert-field"
    <strong>proto</strong>
    :
    Object[0]</p>
  </blockquote>
  
  <p><code>console.log(alertElement)</code> outputs the following:</p>
  
  <blockquote>
    <p>x.fn.x.init {context: document, selector: "#report-alert-field"}
    context
    :
    document
    selector
    :
    "#report-alert-field"
    <strong>proto</strong>
    :
    Object[0]</p>
  </blockquote>