Populate dropdown list when dropdown is displayed ?
<p>First of all I want to say I'm very new to jQuery, I just started yesterday so I'm kinda fuzzy on some of the logic, don't hesitate to correct me if I'm not using the best pratices.</p>

<p>Basically what I want to do is :</p>

<ul>
<li>I have a webpage with a few buttons</li>
<li>when I click on one of the button, I will load a div containing a few elements (that differs depending on the button pressed)</li>
<li>in some of these cases there's a dropdown list that I want to populate with ajax when it's loaded</li>
</ul>

<p>I can handle the buttons and the div loading correctly, but I'm having a bit of trouble with my dropdown list. I want to do the ajax call when the dropdown is loaded in the document, and I can't figure out how to do that.</p>

<p>A little bit of HTML that is created when I click one of the button :</p>

<pre><code>&lt;div class='content'&gt;
  &lt;select class='dropdown'&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>This is only added to the document AFTER I clicked on a button, it's not there in the first place (basically because different buttons will load different stuff in the content div)</p>

<p>What I first tried in my JS :</p>

<pre><code>$('select.dropdown').load(function() {
   alert('dropdown loaded');
});
</code></pre>

<p>This didn't work, at all, the alert never appeared no matter where I put this little bit of JS (I tried putting it before creating the select in html, I tried putting it after, no matter what I never got the alert)</p>

<p>So I tried with the ready function :</p>

<pre><code>$('select.dropdown').ready(function() {
  alert('dropdown loaded');
});
</code></pre>

<p>And that worked. I replaced the alert with a .post() looking like this :</p>

<pre><code>$('select.dropdown').ready(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $('select.dropdown').append("html stuff with &lt;option&gt;");
    });
  }, 'json');
</code></pre>

<p>And that worked well. But the thing is, now I want to populated only the select tag that fired the .ready() event, so I tried with $(this) : </p>

<pre><code>$('select.dropdown').ready(function() {
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("html stuff with &lt;option&gt;");
    });
  }, 'json');
</code></pre>

<p>And that didn't work. If I try adding an alert to see what "this" is referencing :</p>

<pre><code>$('select.dropdown').ready(function() {
  alert($(this).attr('class'));
  $.post("url.php", {arg: 'arg'}, function(data) {
    $.each(data, function() {
      $(this).append("html stuff with &lt;option&gt;");
    });
  }, 'json');
</code></pre>

<p>I get "undefined".</p>

<p>So basically my questions are :</p>

<ul>
<li>Why the .ready() works and not the .load() ? </li>
<li>How can I use $(this) in a .ready() function to reference the dropdown that fired the ready event ?</li>
</ul>

<p>The reason I want to use $(this) and not the first solution is because I will dynamically add other dropdown, that will use the same HTML markup and the same JS code (if possible), so I have to discriminate which dropdown fired the ready event.</p>

<p>Any ideas/advices on how to do that ?</p>
