CODEWITHSUNDEEP
javascriptjquery
z-index
z-index

Reputation: 389

Rendering an html fragment with a jQuery script

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!

Upvotes: 1

Views: 363

Answers (1)

Rafay
Rafay

Reputation: 31033

$(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/

Upvotes: 9

Related Questions