Friday, January 2, 2009

[jQuery] Cannot get dynamically generated link to fire

The code is below. I cannot get the link that was added to the
<li>blue</li> to be fired after the code is ran. It works fine for
Item1 remove me link Any ideas?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript"
src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".color").click(function(){
//alert("You are now leaving the site.");
//$(this).hide();
//alert($(this).attr("title"));
$("#list1").append("<li>"+$(this).attr("title")+"<a href='#'
class='removeme'>Remove</a></li>");
return false;
});

$(".removeme").click(function() {
alert("Remove");
return false;
});

});

</script>

</head>

<body>

<ul id="list1">

<li>Item 1 <a href='' class='removeme'>Remove</a></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<a href="" id="blue" title="blue" class="color">Add</a>
</body>
</html>

No comments:

Post a Comment