Load selected data using $(this).append(data) inside live - append

Question

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

Answer 1

this isn't referring to the same element inside of the post closure, use a context variable:
var that = $(this);
$.post("getdata.php", {what: "ingredients"}, function (data) {
alert(data);
that.append(data);
});

Answer 2

$(this) in your ajax response is the window, not the <select>.

Answer 3

You can use the "context" setting for ajax http://api.jquery.com/jQuery.ajax/ ... and it transfer "this" to the success scope