Question

示例我有2个html输入

<div class="wrap">        
   <input class="autocomplete" name="auto_1" />
   <input class="autocomplete" name="auto_2" />
</div>

auto_1和auto_2使用jQuery UI自动完成，并在文档就绪时触发$(function(){})

然后，如果我们点击我网站上的按钮，就会有另一个按钮。由函数$('.wrap').append('<input class="autocomplete" name="auto_3" />')

添加

现在总共会有3个输入

<div class="wrap">        
   <input class="autocomplete" name="auto_1" />
   <input class="autocomplete" name="auto_2" />
   <input class="autocomplete" name="auto_3" />
</div>

但自动完成功能未在auto_3上运行，因为它是新添加的。

如何让它运行/使用自动完成功能？

Answer 1

我认为问题不在于点击新输入，而是在新输入上自动完成。使用

添加新元素时

$('.wrap').append('<input class="autocomplete" name="auto_3" />')

您必须将自动填充功能附加到此新字段，因此

$('input[name="auto_3"]').autocomplete();

或使用livequery插件进行自动填充：https://stackoverflow.com/a/4551313/657584

Answer 2

使用.on()：http://api.jquery.com/on

$('.wrap').on('click', '.autocomplete', function(){
    // your code here
    // $(this).autocomplete(); // or whatever.
});

使用.on()方法将您的点击处理程序委托给将添加到DOM的existant和future元素，例如（new）弃用（来自jQ 1.7）.live()

来自DOCS：

$("a.offsite").live("click", function(){ alert("Goodbye!"); });   // jQuery 1.3+
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); }); // jQuery 1.7+

jQuery触发了新添加的html代码

2 个答案: