Question

我创建了动态文本框。我也有自动生成文本框的功能。但它不适用于动态文本框。

用于自动生成文本框的

功能适用于静态文本框。但我希望它在动态文本框上。视图代码如下

  <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;
    });

Answer 1

您必须使用实时事件绑定来实现自动完成功能。

尝试使用：

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

                }
            });
        });

Answer 2

<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;          
    });       
});

此代码有效

如何在jquery中为动态创建的文本框编写自动完成方法

2 个答案: