自动完成动态文本框不起作用

Question

我正在尝试遵循另一个问题的解决方案，但没有任何运气。

我有一个动态文本框，想在其上应用一些自动完成功能，这是我的代码

Javascript：

 $(function () {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size();

$('#addScnt').live('click', function () {
    $(' <tr> <td> <input type="text" id="kdbr" class ="kdbr" style="width:300px;" name="kdbr[]" value=""/></td><td> <input type="text" id="nmbr" class ="nmbr" style="width:300px;" name="nmbr[]" value=""  /></td><td><input type="text" id="jumlah" style="width:80px;" name="jumlah[]" value=""  /></td></label> <td><input id="remScnt" style="width:80px;" class="btn" type="button" value="Remove" ></td> </tr>').appendTo(scntDiv);
    i++;
    return false;
});

$('#remScnt').live('click', function () {
    //if (i > 1) {
        $(this).parents('tbody').remove();
      //  i--;
    //}
    return false;
});

$(".kdbr").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "<?php echo base_url();?>js/coba3.php",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
            //  var data = $.parseJSON(response);
                response($.map(data, function (el) {
                    return {
                        value: el.kdbr,
                        label: el.nmbr
                    };
                }));
            }
        });
    },
    select: function (event, ui) {
        // Prevent value from being put in the input:
        event.preventDefault();
        $('.kdbr').val(ui.item.value);
        // Set the next input's value to the "value" of the item.
        $('.nmbr').val(ui.item.label);

    }

});
});

html：

<table id="p_scents" class="table table-striped table-bordered">
<thead>
    <tr>
        <th style="width:400px;">Kode Barang</th>
        <th style="width:400px;">Nama Barang</th>
        <th style="width:100px;">Jumlah</th>
        <th style="width:100px;">Delete</th>
    </tr>
</thead>
<tbody> 

<label for="p_scnts"> 
<tr><td> <input type="text" id="kdbr" class ="kdbr" style="width:300px;" name="kdbr[]" value=""  /></td><td> <input type="text" id="nmbr" class ="nmbr" style="width:300px;" name="nmbr[]" value=""  /></td><td><input type="text" id="jumlah" style="width:80px;" name="jumlah[]" value=""  /></td></label> <td><input id="remScnt" style="width:80px;" class="btn" type="button" value="Remove" ></td></tr>

</tbody>

自动完成仅适用于不是动态的第一行，并且每次我尝试将鼠标指向自动完成列表或尝试指向下方时，该列表都会立即消失。

有人可以告诉我我做错了什么吗？

Answer 1

• live已弃用，请改用on 。

• 用于动态添加的元素

   $(document).on('click', '.remScnt', function() {}); 

  代替

   $('.remScnt').on('click', function() {}); 

• 由于label与tr混合，您的HTML结构不正确

• 对于动态添加的元素，应调用autocomplete （要处理此自动完成功能，应将其设置为全局）。
• 删除行的功能不正确。
• 自动完成select事件处理程序不正确：它将选择的值添加到所有行。
• 自动完成source功能已替换为仅用于测试的数组。

摆弄这个 。

var autoCompleteSettings =
{
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ],
    select: function(event, ui)
    {
        // Prevent value from being put in the input:
        event.preventDefault();
        var selectedEl = $(event.target);
        selectedEl.val(ui.item.value);
        // Set the next input's value to the "value" of the item.
       selectedEl.closest('td').next().find('input').val(ui.item.label);
    }
};

var addId = 0;

$(function()
{
    var scntDiv = $('#p_scents');

    $('#addScnt').on('click', function()
    {
        addId++;
        $('<tr> <td> <input type="text" id="kdbr' + addId + '" class ="kdbr" style="width:300px;" name="kdbr[]" value=""/></td><td> <input type="text" class ="nmbr" style="width:300px;" name="nmbr[]" value=""  /></td><td><input type="text" style="width:80px;" name="jumlah[]" value="" /></td><td><input class="remScnt btn" type="button" value="Remove" ></td> </tr>').appendTo(scntDiv);
        $('#kdbr' + addId).autocomplete(autoCompleteSettings);
        return false;
    });

    $(document).on('click', '.remScnt', function()
    {
        $(this).closest('tr').remove();
        return false;
    });

    $(".kdbr").autocomplete(autoCompleteSettings);
});