title: Why this jquery selector does not work?
body: <p>I have a task from a client to correct a page and I found that jQuery descendant selector does not behave as expected.</p>
  
  <p>Here is an excrept of the HTML:</p>
  
  <pre><code>&lt;form action="http://submit.url/subscribe.php" method="post" enctype="multipart/form-data" id="mssysform8217" class="mssysform" &gt;
  &lt;div id="mssys-formcontainer"&gt;
      &lt;div class="formfields"&gt;
          &lt;table style="width: 100%"&gt;
          &lt;div class="formfield-item" id="formfield-item-email"&gt;
              &lt;tr&gt;
              &lt;td class="style1"&gt;&lt;label &gt;E-mail címe&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="text" name="email" value=""&gt;
                  &lt;div class="error-container"&gt;Please fill in this field!&lt;/div&gt;
                  &lt;div style="clear: both;"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/div&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I tried to debug it with FireFox:</p>
  
  <ul>
  <li><p>this worked:</p>
  
  <pre><code>console.debug($("#mssysform8217 :input[name='email']").val());
  </code></pre>
  
  <p>test@gmail.com</p></li>
  <li><p>this did not worked:</p>
  
  <pre><code>console.debug($("#mssysform8217 #formfield-item-email :input[name='email']").val());
  </code></pre>
  
  <p>undefined</p></li>
  <li><p>but:</p>
  
  <pre><code>console.debug($("#mssysform8217 #formfield-item-email"));
  </code></pre>
  
  <p>[div#formfield-item-email.formfield-item]</p></li>
  </ul>
  
  <p>The problem is that the submit script is generated by a third party app and it wants to use the 3 level descendant selector.</p>