AJAX:如何用同一DIV中的链接替换DIV的内容?

我的index.php如下:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<a href='one.php' class='ajax'>One</a>

<div id="workspace">workspace</div>

一个.php

<?php
$arr = array ( "workspace" => "<a href='two.php' class='ajax'>two</a>" );
echo json_encode($arr);
?>

两个.php

<?php 
$arr = array( 'workspace' => "Hello World" );
echo json_encode($arr);
?>

阿贾克斯.js

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event) {
        event.preventDefault();
        // load the href attribute of the link that was clicked
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                // updated to deal with any type of HTML
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

加载index.php时,有一个链接(One)和一个DIV(workspace)。当我点击'One'链接时,One.php的内容被调用,链接'Two'成功地出现在'workspace'DIV中。

但是现在当我点击链接'Two'时,'Hello World'就不会出现在'workspace'DIV中,并且在没有AJAX调用的情况下单独打开。

谢谢