自动完成不适用于动态添加内容

我正在使用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); 
     }); 
    } 
});

我在做什么错？我应该使用绑定，生活还是在？

来源

2013-01-07 Hugs

的问题是，您的变量：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);} 
     }); 
    });

来源

2013-01-07 16:58:10

嘿感谢您的答案，但它似乎并没有工作。我不确定我还能看到更多信息。 – Hugs

原来你的答案和其他人的答案使它的工作组合！谁来给现在的答案！ – Hugs

你应该+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-07 16:57:31 Rahul

嘿感谢您的帮助，您的jQuery代码帮助。谢谢。 – Hugs

自动完成不适用于动态添加内容

回答

相关问题