如何在jQuery中爲動態創建的文本框賦值？

Question

我創建使用jquery的產品名稱和產品標識， 我已經創造了獨特的ID爲每個文本框的文本框的動態，我希望值賦給文本框。 我的代碼如下

<script type="text/javascript"> 

$(document).ready(function() { 
    var rIndex = $(".ProductName").length; 
    var ndate = new Date(); 
    var time = ndate.getMilliseconds(); 

    var i = rIndex + time; 
    var a1, a2; 


    $("#lnkAddProduct").on("click", function() { 


    var d = '<div class="addedProduct "><div class="control-group " style="margin-bottom:10px;"><input type="text" class="ProductName span2 pull-left" id="Product_Name_' + i + '" name="Product_Name" value="" placeholder="start typing to load products")"/><input type="text" class="ProductId" name="Product_Id" id="Product_Id_' + i + '" value="" /><a href="#" class="clsremove font-midium" style="margin-left:5px;margin-top:5px;" id="remove_' + i + '">remove</a></div></div>'; 

     $('#ProductList').append(d); 
     alert("newID:"+i); 

     //$(".clsremove").unbind("click").click(function() { 
     // $(this).closest(".addedProduct").remove(); 
     //}); 


     $('body').delegate(".ProductName", "focusin", function() { 

      $(this).autocomplete({ 
       source: '@Url.Action("NewvendorList","Product")', 

      minLength: 1, 

      select: function (evt, ui) { 
       a1 = ui.item.label; 
       a2 = ui.item.id; 

       alert("label" + ui.item.label); 
       alert("id" + ui.item.id); 

       $('#Product_Name_'+i).val(a1); 
       alert("i===" + i); 

       $('#Product_Id_'+i).val(a2) 

      }, 
     }); 
     }); 
     i = i + 1;   
    }); 
}); 

$（ '＃PRODUCT_NAME _' + I）.VAL（A1）此行發生錯誤爲未定義。 如何將值賦值給文本框。

Answer 1

$(document).ready(function() { 
    var rIndex = $(".ProductName").length; 
    var ndate = new Date(); 
    var time = ndate.getMilliseconds(); 

    var i = rIndex + time; 
    var a1, a2; 


    $("#lnkAddProduct").on("click", function() { 


    var d = '<div class="addedProduct "><div class="control-group " style="margin-bottom:10px;"><input type="text" class="ProductName span2 pull-left" id="Product_Name_' + i + '" name="Product_Name" value="" placeholder="start typing to load products")"/><input type="text" class="ProductId" name="Product_Id" id="Product_Id_' + i + '" value="" /><a href="#" class="clsremove font-midium" style="margin-left:5px;margin-top:5px;" id="remove_' + i + '">remove</a></div></div>'; 

    $('#ProductList').append(d); 
    alert("newID:"+i); 

    //$(".clsremove").unbind("click").click(function() { 
    // $(this).closest(".addedProduct").remove(); 
    //}); 


    $(".ProductName").on("focusin", function() { 

     $(this).autocomplete({ 
      source: '@Url.Action("NewvendorList","Product")', 

     minLength: 1, 

     select: function (evt, ui) { 
      a1 = ui.item.label; 
      a2 = ui.item.id; 

      alert("label" + ui.item.label); 
      alert("id" + ui.item.id); 

      $('#Product_Name_'+i).val(a1); 
      alert("i===" + i); 

      $('#Product_Id_'+i).val(a2) 

     }, 
    }); 
    }); 
    i = i + 1;   
    }); 
}); 
replace your code with above and test it