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/