Rendering an html fragment with a jQuery script

Question

I'm writting my first jQuery script which should render a list of anchors in a div (whose id is #content) when I click on another anchor (#dwLink). I get are the links displayed as I want, but just for milliseconds! then they dissapear.

This is the script I wrote:

$(document).ready(function() {
 $('#dwLink').bind('click', function() {
 $('#content').html(
 "<ul>" +
 "<li><a href=\"#\">Link 1</a></li>" +
 "<li><a href=\"#\">Link 2</a></li>" +
 "<li><a href=\"#\">Link 3</a></li>" +
 "</ul>"
 );
 });
});

Does it have something wrong? I can't find where the problem is. I know I could do it by writting plain javascript since it is a basic dom manipulation problem, but I want to do it in a jQueryesque way. I hope you can help me. Thanks!

Answer 1

$(document).ready(function() {
 $('#dwLink').bind('click', function(e) {
 e.preventDefault(); // prevent the default behavior of the link
 $('#content').html(
 "<ul>" +
 "<li><a href=\"#\">Link 1</a></li>" +
 "<li><a href=\"#\">Link 2</a></li>" +
 "<li><a href=\"#\">Link 3</a></li>" +
 "</ul>"
 );
 });
});

here is the fiddle http://jsfiddle.net/45ShY/