title: Two ID's in jQuery selector not working
body: <p>I think I have misunderstood something when it comes to selecting an element.</p>
  
  <p>I have the following query:</p>
  
  <pre><code>$('#my_id_1 #my_id_2').my_function();
  
  &lt;form id="my_id_1"&gt;
    &lt;input id="my_id_2" type="text" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I though that <code>my_function()</code> will only trigger when <code>my_id_2</code> is "inside" <code>my_id_1</code>.</p>
  
  <p>But the function is also triggered on another page where I have <code>my_id_2</code> but not <code>my_id_1</code>.</p>
  
  <p>Can anyone tell me what I'm missing here?</p>
  
  <p><strong>Code update</strong>  </p>
  
  <pre><code>$('#my_form #country').my_func().autosuggest_country();
  
  
  (function () {
    // "Namspace" which also kind of works like an interface
    $.fn.my_func = function(opt) {
      this.autosuggest_country = autosuggest.autosuggest_country ;
      return this;
    }
  
  
    var autosuggest = {
      autosuggest_country : function(action) {
        $(this).autocomplete({ (...) });
      }
    }
  })(jQuery);
  </code></pre>
  
  <p><strong>Page 1</strong>  </p>
  
  <pre><code>&lt;form id="my_form" class=""  method="post" onsubmit="return false;"&gt;
    &lt;input id="country" type="text" autocomplete="off"  required="required" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Page 2</strong></p>
  
  <pre><code>&lt;div id="mainSection" class="mainGrid"&gt;
  
    &lt;div class="selectCountry"&gt;
      &lt;select id="country" name="selectlist_country"&gt; (...) &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>