Hello

I am using ajax in an autocomplete feature, and to resuse the existing
templates, i am attempting to dynamically add a close button/link to the
autocomplete results.

I understand that i cannot add an event listener to newly created elements,
so i am creating the element using the live() function then appending the
element to the output. Clicking the element should close the output.

var outputDiv = $("#ajaxSearchResults");
var close = $(' (close) ');
$(close).live("click", function(){
    $(outputDiv).hide("slow");
    return false;

$(outputDiv).append(close);

...but the click event is not triggering - even if i simply put an alert box
in there. What am i doing wrong?
--
View this message in context: http://old.nabble.com/adding-event-to-dynamic-element-tp26452452s2724...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

You're doing it wrong, and you don't need to use live.

I tested this, and it works:

var $results = $('#ajaxSearchResults');
$('<span></span').text('(close)').appendTo($results).click(function(){
    $(this).parent().hide('slow');

First we cache the #ajaxSearchResults into a var. Then we create an
empty span, add some text to it, and then append it to our cached div.
Then we add a click action to it, and tell it that it should hide it's
parent, when clicked.