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混合
应该调用dymanically添加的元素autocomplete（处理此自动完成设置应该是全局的）。
删除行的功能不正确。
自动填充select事件处理程序不正确：它将所选值添加到所有行。
自动完成source函数仅替换为数组用于测试。

Fiddle with this

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

自动完成动态文本框无效

1 个答案: