Question

我使用jQuery动态添加html，并在此内容上使用自动完成功能。但是，自动完成功能不适用于动态添加的内容。我见过许多类似的问题，但他们的解决方案对我来说似乎不起作用。我的jQuery代码是：

$(document).ready(function() {
    if ( $("#add-sister-centers").length > 0 ){

        $(".autocomp_centers").autocomplete({ 
            serviceUrl:'/suggest_centers',
                maxHeight:400,
                width:252,
                minChars:2,
                onSelect: function(value, data){ $("input[name='center_ids[]']").val(data); }
        });

        $("#add-another-button").click( function(){
            var sister_center_input = "<div class=\"field\" style=\"margin-top:10px;\"><span class=\"purple-text\" style=\"font-weight:bold; margin-right:20px;\">Center name*</span><input type=\"text\" name=\"center_names[]\" class=\"autocomp_centers\"/></div>"
            sister_center_input.autocomplete();
            $("#additional-sister-centers").append(sister_center_input);
        });
    }
});

我做错了什么？我应该使用bind，live还是on？

Answer 1

首先，您只能将自动填充插件应用于文本框。第二，在尝试对其应用自动完成功能之前，尚未呈现新创建的文本框。此外，sister_center_input只是一个不包含任何DOM的字符串变量，因此它不能对字符串应用自动完成。尝试下面提到的代码

var sister_center_input = $("<div class=\"field\" style=\"margin-top:10px;\"><span class=\"purple-text\" style=\"font-weight:bold; margin-right:20px;\">Center name*</span><input type=\"text\" name=\"center_names[]\" class=\"autocomp_centers\"/></div>");
$("#additional-sister-centers").append(sister_center_input);
$("#additional-sister-centers").find(".autocomp_centers").autocomplete();

Answer 2

问题是你的变量：sister_center_input只是一个字符串变量，但是你试图使用它的jQuery autocomplete方法。那永远不会奏效。

您还必须为上面定义中定义的自动完成功能传递相同的属性。

将代码的第二部分更改为如下所示并尝试：

    $("#add-another-button").click( function(){
        var sister_center_input = "<div class=\"field\" style=\"margin-top:10px;\"><span class=\"purple-text\" style=\"font-weight:bold; margin-right:20px;\">Center name*</span><input type=\"text\" name=\"center_names[]\" class=\"autocomp_centers\"/></div>"
        $("#additional-sister-centers").append(sister_center_input);
        $('.autocomp_centers').autocomplete({ 
            serviceUrl:'/suggest_centers',
            maxHeight:400,
            width:252,
            minChars:2,
            onSelect: function(value, data){ $("input[name='center_ids[]']").val(data);}
        });
    });

自动填充功能不适用于动态添加的内容

2 个答案: