Ajax load page without refresh

Question

I am looking for information what is the simplest way to update page content using jquery + ajax. I would like to update only #container content, but not a full page.

I am begginer in ajax.

Thanks.

MY Jquery code

  <script>
    $(document).ready(function(){
      //page
      $('.row').load('services.html');

      $('.nav_link').click(function(){
        var page = $(this).attr('href');
        $('.row').load(page);
        return false;
      });
    });
  </script>

HTML:

<div class="row">
          <nav role="navigation" class="nav">
            <a class="nav_link" href="services"><div class="nav_line"></div>PASLAUGOS</a> <a class="nav_link" href="contacts.html"><div class="nav_line"></div>KONTAKTAI</a>
          </nav>
        </div>

services.html:

<div class="row">
    <nav role="navigation" class="nav">
        <a class="nav_link" href="services.html">
            <div class="nav_line"></div>
            PASLAUGOS
        </a> 
        <a class="nav_link" href="contacts.html">
            <div class="nav_line"></div>
            KONTAKTAI
        </a>
    </nav>
    <div class="result">
      gsdgdsgsdgdsgds gds gdsg dsg sd gds g sdgsd gdsg sd gsd
    </div>
</div>

Answer 1

Try

$('.row').on("click",".nav_link",function(e){ 
  e.preventDefault(); // cancel click
  var page = $(this).attr('href');   
  $('.row').load(page);
});

Since .on will assign the click to the new links