Bind jQuery UI autocomplete using .live()

Question

I've searched everywhere, but I can't seem to find any help...

I have some textboxes that are created dynamically via JS, so I need to bind all of their classes to an autocomplete. As a result, I need to use the new .live() option.

As an example, to bind all items with a class of .foo now and future created:

$('.foo').live('click', function(){   alert('clicked'); }); 

It takes (and behaves) the same as .bind(). However, I want to bind an autocomplete...

This doesn't work:

$('.foo').live('autocomplete', function(event, ui){   source: 'url.php' // (surpressed other arguments) }); 

How can I use .live() to bind autocomplete?

UPDATE

Figured it out with Framer:

$(function(){   $('.search').live('keyup.autocomplete', function(){     $(this).autocomplete({       source : 'url.php'     });   }); }); 

Answer 1

jQuery UI autocomplete function automatically adds the class "ui-autocomplete-input" to the element. I'd recommend live binding the element on focus without the "ui-autocomplete-input" class to prevent re-binding on every keydown event within that element.

$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) {     $(this).autocomplete(options); }); 

Edit

My answer is now out of date since jQuery 1.7, see Nathan Strutz's comment for use with the new .on() syntax.