div中的ajax html

Question

In my html code i have this

<li class="register"><a href="">Registreer</a></li>

and

<div id="content">

</div>

I try to load a html file into the div using the following code in the head

<script type="text/javascript" src="includes/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/js/navbar.js"></script>

navbar.js :

$(document).ready(function() {
$(function(){
  $(".register").click(function(){
    $("#content").load("/signup.html");
    document.write("test");
  });
});
});

I have copied signup.html all over my webpage folders. But it does not work. However it does display test for 1/4th of a second. I also tried putting my js code directly in the html file but that doesn't work either.

Answer 1

You are repeating yourself:

$(document).ready(function() {
   $(function(){ //same as $(document).ready(function() {
     $(".register").click(function(){
       $("#content").load("/signup.html");
       document.write("test");
     });
   });
});

Try just doing this:

   $(function(){ 
     $(".register").click(function(){
       $("#content").load("/signup.html");
       document.write("test");
     });
   });

Also you might want to try stopping the default event of your link:

   $(function(){ 
     $(".register").click(function(){
       $("#content").load("/signup.html");
       document.write("test");
     });         
     $(".register").on('click', 'a', function(e){
        e.preventDefault(); //prevents action of the link
     });
   });