1

我正在使用 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？

4

2 回答 2

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();
于 2013-01-07T16:57:31.530 回答
1

问题是您的变量：sister_center_input只是一个字符串变量，但您正试图从中使用 jQueryautocomplete方法。那永远行不通。

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

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

    $("#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);}
        });
    });
于 2013-01-07T16:58:10.757 回答