[jQuery] Issues in using getJSON menthod

HI all,
I am trying to use the getJSON method to fetch data from a json file
on clicking a link.Now i make a div element empty initially and after
fetching the content i use $('#midbox').append($(html));.Now the
updated contents are visible for a second then it reverts to the
original contents of #midbox.Now i am not able to figure it out why
this happens.This is my code snippet:
<snip>
$('ul>li>ul>li>a').click(function(){
    var name=$(this).text();
    var filename='js/'+ name + '.json';
    $.getJSON(filename,function(data){
    $('#midbox').empty();
    $.each(data,function(entryIndex,entry){
    var html='<table width="430px" cellspacing="3" cellpadding="3"
border="0" >';
     html+='<tr>';
     html+='<td align="left"><p class="heading">'+entry['name']+
'<span class="maximise">';
     html+='</span>
';
     html+='<div    class="entry">'+entry['Introduction']+'</div></td></
tr>';
     html+='<tr>';
     html+='<td align="left"><p class="heading"> Rule <span
class="maximise">';
     html+='</span>
';
     html+='<div    class="entry">';
     html+='<ul>';
        $.each(entry['rule'],function(lineIndex,line){
            html+='<li>'+line+'</li>';
        });
     html+='</ul></div></td></tr>';
     html+='</table>';
     $('#midbox').append($(html));
    });
    });
});
</snip>