title: Rebind function when change DOM after ajax
body: <p>I'm trying to get the height of an element before and after an ajax call to change the content of this element (for learning reasons).</p>
  
  <p>Example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready()
       calcHeigth('#listar-cursos');       
   });
  funcion calcHeigth(idElement){
     console.log($(idElement).outerHeight(true));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="listar-cursos"&gt;all the content is here&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the document is ready, <code>calcHeigth</code> function returns 200px.</p>
  
  <p>There is a form on that page that is sent by ajax and when the request ends I just empty the contents of the element, and then call <code>calcHeigth</code> again (in <code>ajaxComplete</code> event).</p>
  
  <pre class="lang-js prettyprint-override"><code>$("#formSeacrh").submit(function () {
          if ($(this).valid()) {
              var url = $(this).attr("action");
              var data = $(this).serialize();
  
              $.ajax({
                  type: "POST",
                  url: url,
                  data: data,
                  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                  success: function (data) {
                      $("#listar-cursos").html("");                  
                  },
                  complete: function () {
                      Completo();                    
                  },
                  beforeSend: function () {
                      Carregando();
                  },
                  error: function () {
                      Falha();                    
                  },
                  ajaxComplete: function () {
                      calcHeigth('#listar-cursos');
                  }
              })            
  
              return false;
          }
          return false;
      });
  </code></pre>
  
  <p>The result from <code>calcHeigth</code> is always 200px, like when the document is ready, even with the empty element. <code>calcHeigth</code> not realized that the element was changed. The result that I expected was 40px. How to fix and get the current height?</p>