JQuery не будет загружать контент в область DIV .. где я ошибся

Итак, я пытаюсь загрузить контент с другой страницы с помощью метода JQUERY LOAD SO. Содержимое может появляться без обновления страницы … Я сделал это, но когда я нажимаю на ссылку, она все же перенаправляет меня на другую страницу вместо загрузка содержимого в div.

Ниже мой код ..

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title> MadScore, A Social Scoring Platform </title> <link rel="stylesheet" type="text/css" href="css/madscore.css"> <link rel="stylesheet" type="text/css" href="css/skins/tango/skin.css" /> <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ scroll: 1, buttonNextHTML:"<div></div>", buttonPrevHTML:"<div></div>" }); }); </script> //Here is where I made the Jquery call for the div below with class "panel" but it won't load .. <scrip type="text/javascript"> $(document).ready(function(){ $("profile").click(function(){ $(".panel").load("this.href"); }); }); </script> </head> <body> <div class="sliding-panel"> <div class="container"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li> <li> <div class="panel"> //panel supposed to be triggered by Jquery <h1> People </h1> <?php database_connect(); $query = "select * from People"; $result = $connection->query($query); $row_count =$result->num_rows; for($i = 1; $i <= $row_count; $i++) { $row = $result->fetch_assoc(); echo "<a href='/profile.php?id=".$row['ID']."' id='profile'><img src ='../".$row['Picture']."' width='100' height='100' /> </a>"; } ?> </div> </li> </ul>