2014-03-27 49 views
0

我創建了動態文本框。我也有文本框的自動縮放功能,但它不適用於動態文本框。如何在jquery中動態創建文本框的自動縮放方法

文本框的自動縮放功能是在靜態文本框上工作的。 但我想在動態文本框中。用於視圖 碼是如下

<div class="controls"> 
      @Html.Hidden("ProductId") 
      <div id="addProduct"> 
      </div> 
      <div class="pull-left" style="margin-top: 5px;"> 
       <a href="#" id="lnkAddProduct">add product</a> 
      </div> 
    </div> 

我jQuery代碼如下所示。

<script type="text/javascript"> 

    $(document).ready(function() { 
     var i = 0; 
     $("#lnkAddProduct").on("click", function() { 

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


     }); 
     $(document).on('click',".clsremove", function() 
     { 
      $(this).parent().parent().remove();  

      return false; 
     }); 

     $('#Product_Name_'+ i).autocomplete({ 

      source: '@Url.Action("NewvendorList")', 

      minLength: 1, 

      select: function (evt, ui) { 


       $("#Product_Name_"+i).val(ui.item.label);    
       $("#ProductId_"+i).val(ui.item.id) 
       alert($("#ProductId_"+i).val()); 

      } 
     });   

     i = i + 1; 
    }); 

+0

任何人可以幫助我這個問題? –

+0

此自動完成功能不適用於dynamicaly創建的文本框 –

回答

0

你應該有現場使用事件自動填充功能結合。

嘗試使用:

$('body').delegate(".ProductName", "focusin", function() { 
      $(this).autocomplete({ 
       source: '@Url.Action("NewvendorList")', 

       minLength: 1, 

       select: function (evt, ui) { 
        $("#Product_Name_" + i).val(ui.item.label); 
        $("#ProductId_" + i).val(ui.item.id); 
        alert($("#ProductId_" + i).val()); 

       } 
      }); 
     }); 
+0

非常感謝,它的工作原理 –

0
<script type="text/javascript"> 

$(document).ready(function() { 
    var i = 0; 


    $("#lnkAddProduct").on("click", function() { 
     @*var url = "@Url.Content("~/Scripts/GeneralScript.js")"; 
      $.getScript(url, 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="hidden" name="ProductId" id="ProductId" 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) { 


       $("#Product_Name").val(ui.item.label); 
       $("#ProductId").val(ui.item.id); 
       alert("val:"+$("#ProductId").val()); 

      }, 

     }); 
     }); 

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

此代碼的工作