2

Example I had 2 html input

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

The auto_1 and auto_2 is using auto complete by jQuery UI and triggered when document ready $(function(){})

And then if we click a button on my website, there will be another one button. Added by function $('.wrap').append('<input class="autocomplete" name="auto_3" />')

And now total there will be 3 input

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

But the autocomplete function is not running on auto_3 because it's newly added.

How to make it running/use autocomplete?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
GusDeCooL
  • 5,639
  • 17
  • 68
  • 102

2 Answers2

2

I think the problem is not with click on new input but with autocomplete on new input. When you add new element with

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

You must attach autocomplete to this new field, so 

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

Or make autocomplete with livequery plugin: https://stackoverflow.com/a/4551313/657584

Community
  • 1
  • 1
Zefiryn
  • 2,240
  • 2
  • 20
  • 30
1

Use .on() : http://api.jquery.com/on

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

Using the .on() method you delegate your click handler to existant and future elements that will be added to the DOM, something like the (newly) deprecated (from jQ 1.7) .live()

From the 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+
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313