title: Load selected data using $(this).append(data) inside live
body: <p>I use the following code to dynamically add input fields to form, based on this source:</p>
  
  <pre><code>http://www.infotuts.com/dynamically-add-input-fields-to-form-jquery/
  </code></pre>
  
  <p>Here's a part of my code:</p>
  
  <pre><code>$(document).ready(function(){
      var counter = 2;
      $("#btnAddIngredients").click(function () {
          var newIngredientsData = $(document.createElement('div'))
              .attr("id", 'ingredientsData' + counter);
          newIngredientsData.html('&lt;div id="ingredientsData'+ counter + '" class="row"&gt;' +
                      '&lt;div class="col-ingredients"&gt;#'+ counter + ' : &lt;select id="ingredient'+ counter + '" name="ingredient'+ counter + '" class="selectIngredients"&gt;&lt;select/&gt;&lt;/div&gt;' +
                      '&lt;div class="col-extra"&gt;&lt;input type="text" name="extra'+ counter + '" id="extra'+ counter + '" size="30" maxlength="100" /&gt;&lt;/div&gt;' + 
                      '&lt;div class="col-quantity"&gt;&lt;input type="text" name="quantity'+ counter + '" id="quantity'+ counter + '" size="5" maxlength="30" /&gt;&lt;/div&gt;' +
                      '&lt;div class="col-unit"&gt;&lt;select id="unit'+ counter + '" name="unit'+ counter + '" class="selectUnit"&gt;&lt;select/&gt;&lt;/div&gt;'+
                      '&lt;/div&gt;');
          newIngredientsData.appendTo("#ingredientsList");
          counter++;
      });
  
      $(".selectIngredients").live("click",function () {
          $(this).empty();
          $(this).append('&lt;option value=""&gt;Loading...&lt;/option&gt;');
          $.post("getdata.php", {what: "ingredients"},
                 function (data){
                 alert(data);
                 $(this).append(data);
                 }
                 ,"html");
      });
  });
  </code></pre>
  
  <p>What i'm expecting is for the selected value to be populated every time I click on it But the only thing that appeared is <code>"&lt;option value=""&gt;Loading...&lt;/option&gt;"</code>, which I appended first. It seems <code>$(this).append(data)</code> didn't do it's job. nothing is being appended. The alert(data) above it correctly displays the contents that should be appended.</p>
  
  <p>If I change <code>$(this).append(data);</code> to <code>$("#ingredients1").append(data);</code> for example, the select data is loaded correctly, but not when I use <code>$(this).append(data);</code></p>
  
  <p>What's wrong here? Why do the appends; in the function (data){} doesn't work, while the preceding <code>$(this).append('&lt;option value=""&gt;Loading...&lt;/option&gt;');</code> works correctly every time?</p>