javascript - jquery 自动完成器不适用于动态添加的文本框

Question

Here is a fiddle jquery ui 自动完成器正在处理第一个文本框的页面加载，但在添加更多具有相同类名的文本框后，自动完成器不起作用。

谁能帮帮我

$(document).ready(
    function(){
 var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC" 
    ];
         $( ".lang" ).autocomplete({
      source: availableTags
    });

        $('#addRow').click(
            function() {
                var curMaxInput = $('input:text').length;

                $('#rows li:first')
                    .clone()
                    .insertAfter($('#rows li:last'))
                    .find('input:text:eq(0)')
                    .attr({'id': 'ans' + (curMaxInput + 1),
                           'value': '',
                           'name': 'ans' + (curMaxInput + 1)
                          })
                    .parent()
                    .find('input:text:eq(1)')
                    .attr({
                        'id': 'ans' + (curMaxInput + 2),'value': '',
                        'name': 'ans' + (curMaxInput + 2)
                    });
                $('#removeRow')
                    .removeAttr('disabled');
                if ($('#rows li').length >= 5) {
                    $('#addRow')
                        .attr('disabled',true);
                }
                return false;
            });

        $('#removeRow').click(
            function() {
                if ($('#rows li').length > 1) {
                    $('#rows li:last')
                        .remove();
                }
                if ($('#rows li').length <= 1) {
                    $('#removeRow')
                        .attr('disabled', true);
                }
                else if ($('#rows li').length < 5) {
                    $('#addRow')
                        .removeAttr('disabled');

                }
                return false;
            });
    });

Answer 1

当您添加新的 .lang 元素时，您也不会将自动完成与其关联，因为绑定(bind)仅在文档准备就绪时完成。

所以我创建了一个像这样的函数，然后在文档就绪中调用，也在 $('#addRow').click 中调用:

function addAutocomplete() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC"];

    $(".lang").autocomplete({
        source: availableTags
    });
}
addAutocomplete();

我修改了你的代码并创建了这个 fiddle 。希望这会有所帮助。