在.click()事件到.get()页面并在jquery中替换.html()

时间:2012-06-20 20:30:41

标签: javascript jquery html ajax

我有div class="contentBlock"被视为更新容器

 <div class="contentBlock"></div>

我有一个我编写的脚本无效:c

$(document).ready(function(){
  $('.postLink').on('click', function () {
    $.get("page.php", function (data) {
      $(".contentBlock").html(data);
    });
  });
});

我有一个锚html

<div class="box"> 
  <a class="postLink" "href="#">
    <h1 title="Light me up"></h1>
    <div class="innerbox">
      <figure><img src="http://cpsr-rspc.hc-sc.gc.ca/PR-RP/servlet/ShowImage?photoId=1789" /></figure>
      <ul class="categorySelect">
        <li class="print"></li>
        <li class="video"></li>
        <li class="web"></li>
      </ul>
    </div>
  </a> 
</div>

page.php只是一个img标签和一些lorem。

我从未使用.get()我确定我使用不正确。另外,在加载时,我会在哪里添加加载.gif和fadein的转换?

1 个答案:

答案 0 :(得分:2)

<a class="postLink" "href="#">

应该是

<a class="postLink" href="#">

你有额外的报价。

$(document).ready(function(){
  $(".postLink").on('click', function () {
     // load in animation.gif here
     $(".contentBlock").load("page.php", function() {
         // end loading animation now
     });
  });
});

在jQuery中使用load就是为了这个目的。

这是用于加载的jQuery doc:http://api.jquery.com/load/