0

我使用以下代码根据此源动态将输入字段添加到表单：

http://www.infotuts.com/dynamically-add-input-fields-to-form-jquery/

这是我的代码的一部分：

$(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");
    });
});

我期望的是每次单击它时都会填充所选值但唯一出现的是"<option value="">Loading...</option>"，我首先附加的。它似乎$(this).append(data)没有完成它的工作。没有附加任何内容。它上面的 alert(data) 正确显示了应该附加的内容。

例如，如果我更改$(this).append(data);为$("#ingredients1").append(data);，则选择数据已正确加载，但在我使用时未正确加载$(this).append(data);

这里有什么问题？为什么要追加；在函数 (data){} 中不起作用，而前面的$(this).append('<option value="">Loading...</option>');每次都正确工作？

4

3 回答 3

3

this不是指post闭包内的相同元素，请使用上下文变量：

var that = $(this);
$.post("getdata.php", {what: "ingredients"}, function (data) {
    alert(data);
    that.append(data);                           
});
于 2013-07-02T14:57:20.213 回答
1

$(this)在您的 ajax 响应中是窗口，而不是<select>.

于 2013-07-02T14:56:56.657 回答
0

您可以使用 ajax http://api.jquery.com/jQuery.ajax/的“上下文”设置...并将“this”转移到成功范围

于 2013-07-02T15:01:54.840 回答