title: Jquery .closest is undefined
body: <p>This is a part of a bigger application.<br>
  What I am trying to do is get the text in <code>span1</code> when submitting the form by using <code>.closest</code> in Jquery.</p>
  
  <p>The result of <code>span1 = $(this).closest("span").html()</code> is undefined though.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="span1"&gt;
      texthere
  &lt;/span&gt;
  &lt;div&gt;
      &lt;div class="whatever"&gt;
          &lt;form id="theform" action="#" method="POST"&gt;
              &lt;input type="text" name="input1" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$(document).on("submit","#theform",function(){
      span1 = $(this).closest("span").html();
      input1 = $(this).find("input").val();
      alert(span1+" - "+input1);
      return false;
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/QzwMM/" rel="nofollow">JSFFIDLE</a></p>
  
  <p>Why am I getting undefined when reading the <code>.closest</code> <code>.span1</code>?</p>