jquery autocompleter不适用于动态添加的文本框

时间:2014-06-07 22:16:37

标签: javascript jquery

Here is a fiddle jquery ui autocompleter正在处理第一个文本框的页面加载,但在更多具有相同类名的文本框之后,自动完成程序无法正常工作。

任何人都可以帮助我

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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

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