Shah Zeb Shah Zeb - 2 months ago 6
Javascript Question

.load() not working on ul li click

here is my code



$(document).ready(function(){
$("#work").click(function(){
$("#container").load("about/work.html");
});
$("#profile").click(function(){
$("#container").load("profile.html");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a id="work" href="">work</a></li>
<li><a id="profile" href="">profile</a></li>
</ul>

<div id="container"></div>





when i click on work or profile requested page just flashes in container div and sometime stays in but if i run same script on button click it loads page without any problem. How can i make it work with li ?

Answer

Add event.preventDefault

$(document).ready(function(){
        $("#work").click(function(event){
            event.preventDefault(); changed here
            $("#container").load("about/work.html");
        });
        $("#profile").click(function(){
            event.preventDefault(); //changed here
            $("#container").load("profile.html");
        });
    });
Comments