0

わかりましたので、JQUERY LOAD メソッドを使用して別のページからコンテンツを読み込もうとしています。そのため、ページを更新せずにコンテンツを表示できます...そうしましたが、リンクをクリックすると、代わりに他のページにリダイレクトされます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>
4

2 に答える 2

1

#クリックイベントのバインド中 に欠落しています

$(document).ready(function(){
  $("#profile").click(function(){  // add # here
    $(".panel").load("this.href");
  });
});

.onイベントを動的に追加された要素にバインドするためにも使用します。

于 2012-12-20T06:54:53.590 に答える
0

まず、セレクターがありません#。また、loadメソッドに文字列を渡すだけです："this.href"、実際のリンクを渡す必要があります：$this.attr('href')

リンクの問題に関しては、デフォルトのアクション（クリック）を防ぐa必要があります。そのためには、2つのオプションがあります。 

<script type="text/javascript">
   $(function(){
    alert('on ready works!');
      $("#profile").click(function(event){
        $(".panel").load($this.attr('href'), function(){
          alert('ajax called finished');
        });             
        return false; // or event.preventDefault();
      });
    });
    </script>
于 2012-12-20T06:59:46.323 に答える