AJAX调用成功,但未按预期替换div

在谷歌搜索了很多次之后,我正处于成功的边缘(我想)。

我有一个相当大的页面,概述。包含以下代码段的php:

<script>
  function getSummary(id)
  {
     $.ajax({
       type: "GET",
       url: '_table_category.php',
       data: "catid=" + id, 
       success: function(data) { 
            $('#summary').html(data);
            alert('Successfully called');
         },
         error: function(jqxhr, status, exception) {
             alert('Exception:', exception);
         }
     });
  }
</script>

沿着页面向下,我遍历一个数组并填充一个表。第一列如下:

<td> <a onclick="getSummary('<?php echo $expenses[$k]['categoryid']; ?>')"> <?php echo $expenses[$k]['shortdesc']; ?> </a>  </td>

然后在页面的下方,有一个div将包含详细信息:

      <div class="box">
        <div class="box-header"> <h3 class="box-title"> Details </h3> </div>
        <div class="box-body"> 
          <div id="#summary"> Select a category to see the details. </div>
        </div>
      </div>

加载页面或单击“链接”均无错误。如果我点击链接,它会弹出预期的“成功调用”警报。

查看Chrome中开发人员工具的网络选项卡,它调用了\u table\u类别。php页面(带有catid值),如果我单击它列出的链接(例如\u table\u category.php?catid=35),预览窗格中的HTML格式正确。 如果我随后手动将HTML粘贴到div中,它看起来与预期完全一样。

这让我觉得我遗漏了一些非常明显的东西,我只是没有用结果来替换div?