jquery - Update div in smarty template with jQuery

Question

I am trying to replace the content of a div in a smarty template based on what link a user clicks on.

Problem: When I click on the link, the page to which the href points opens in the same window in the browser, instead of overwriting the content in just one part of the page.

--> For reference, this is the web page.

The following is my jQuery code:

 $('#notes').click(function(evt)
 {
    $('#main').html(($this).attr('href'));
    evt.preventDefault();
 });

Updated jQuery code based on FYE's suggestion

$(document).ready(function(){

        $('#notes').click(function(evt)
            {   
                $('#main').append(get(($(this).attr('href'))));
                evt.preventDefault();
            });

    });

It's in a script tag in the head of the template.

Source of hrefs:

 {block name=sidebar}
      <p class="nav-header" id="notes">Notes</p>
        {foreach $lectures as $lecture}
            <a href={$lecture} class="notes">{$lecture@key}</a><br>
         {/foreach}
 {/block}

Target:

  {block name=body}
      <div id="main">
          Bob
      </div>
 {/block}

Answer 1

First of all, i think jQuery.html() isn't used like this, it will replace the contents of your div with the address of the link, not its content.

You should use an AJAX method like jQuery.ajax() or jQuery.get() to get the contents, and then manually replace it with append() or appendTo()

But to prevent the page from opening, evt.preventDefault() should do the work, try return false; instead, but i'm not sure.