Question

I’m having a problem triggering events on items that have been added to the page. In the following example, if you click X it will remove one of the items, but you if you add an item you can’t remove it.

Here’s the list:

<ul id='mylist'>     <li>Item 1 <a class='remove'>X</a></li>     <li>Item 2 <a class='remove'>X</a></li> </ul> <a class='add'>Add</a> 

Here’s the jQuery:

$('.add').click(function(){      $('#mylist').append('<li>Item 3 <a class='remove'>X</a></li>'); });  $('.remove').click(function(){      $(this).parent().hide('slow').remove(); }); 

Anyone shed any light on this, do I need to update the dom or something to get jQuery to recognize the appended elements?

Answer 1

You need to use the new live API added to jQuery in 1.3

http://api.jquery.com/live/

If you can’t use 1.3, there is a JQuery plugin for 1.2 called LiveQuery that works similarly.