Using anchor after adding using jquery html

Question

Hi,

This is two questions in one really...

First, I have a list of 'tickets'. Each ticket has a unique ID, which I am using to ID the element. There is an option to click ('a.showMore') to view more information about the 'ticket'. When this is clicked, I'm using jquery.append to add an option to close this extra information and slide down the extra info. The problem is with the close. If I hard code the a.closeMore it works, but nothing happens if I use append. Any ideas on what I'm doing wrong?

The code:

$(document).ready(function(){
$('.moreInfo').hide(); //hide the extra info on page load

//Show more information when a.showMore is clicked
$('.showMore').click(function(){
  var ticketNumber=$(this).attr("id");
  var id="#more_"+ticketNumber;
  $('p.options').append(' or <a id="'+ticketNumber+'" class="closeMore">close more info</a></p>');//Add close option to p.options
  $(id).slideDown(); //slide the extra info down
});


//close more information
$('.closeMore').click(function(){
  var id="#more_"+$(this).attr("id");
  $(id).slideUp();
});

});

Secondly, my 'click here' link only works once on the page. Any ideas on how I could make it work for all items in the list (each list item has a unique ID but the same class (a.showMore) and make it work every time it is clicked?

Thanks!

Answer 1

Try using the live() handlers, which will allow your click handler to apply to any elements on the page regardless of when it is added. If you don't use live handlers, you will need to apply the handler to any elements added to the page as they are added since these elements didn't exist when the original handlers were applied and thus don't have a handler connected to them.

$('.closeMore').live('click', function(){
  var id="#more_"+$(this).attr("id");
  $(id).slideUp();
});