Jquery不会将内容加载到DIV区域..我哪里出错了答案

【问题标题】：Jquery won't load content into the DIV area .. where did I go wrongJquery不会将内容加载到DIV区域..我哪里出错了
【发布时间】：2012-12-20 06:53:20
【问题描述】：

好的，所以我正在尝试使用 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>

【问题讨论】：

标签应该是<script type="text/javascript></script>
为什么要包含两个不同版本的jQuery？！我很确定它们不会相互扩展......

标签： php jquery ajax jquery-load

【解决方案1】：

你在绑定点击事件时缺少#

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

还可以使用.on 将事件绑定到动态添加的元素。

【讨论】：

究竟如何？我不确定我明白你的意思..我为配置文件添加了 # 但它仍然没有加载到 div 中???
@user1787184：首先通过添加警报检查是否触发了点击事件。

【解决方案2】：

首先，您的选择器缺少#。另外，您只是将一个字符串传递给加载方法："this.href"，您需要传递实际链接：$this.attr('href')

关于链接问题，您需要阻止默认操作（即点击a）。为此，您有两个选择：

<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>

【讨论】：

所以我应该使用 return false 吗？并添加 # 符号？我不确定我是否理解取消点击事件
@user1787184 你需要 # 符号，就像我在上面的代码中那样，这样你就可以正确选择元素 a。现在，在您单击链接后，您将被重定向，因此您需要取消默认操作（即单击链接，因此您不会被重定向）。我已经更新了我的答案，所以请展示另一种方法
感谢您的帮助，但单击链接后我仍然被重定向到该页面。我复制并粘贴了此 $(document).ready(function( ){ $("#profile").click(function(event){ $(".panel").load("this.href"); event.preventDefault(); }); });
事件是否正在执行？使用 $(函数 (){} );反而。请参阅更新的代码。你用萤火虫顺便说一句？设置断点可以节省您的时间。
@user1787184 第一个选项有一些警报。这会让你走上正确的道路。