Javascript 如何使标题可点击

我在想我的标题关于和朋友的如何可以点击。我只是添加了

class=block

，这样就可以单击它，并使用

alert

功能检查它是否工作。但这行不通

<script>

$(document).on("click", "#about", function ()
{
    alert('Hi');
});

</script>

$（文档）。在（“单击”，“关于”，函数（）
{
警报（“Hi”）；
});

标题

<div class = "col-lg-6">
    <div class = "panel panel-default" style = "height: 300px;">
        <div class = "panel-heading" style = "height: 50px;">
            <div class="col-xs-3"><h3 class="panel-title" style = "padding-top: 7.5px;"><a class = "block" id = "about">About</a></h3></div>
            <div class="col-xs-3"><h3 class="panel-title" style = "padding-top: 7.5px;"><a class = "block">Friends</a></h3></div>
        </div>
    </div>
</div>

关于
朋友

$（窗口）.load（函数（）{
$（'#about'）。在（“单击”，函数（）上）{
警报（“Hi”）；
});
});

关于
朋友

资料来源：

更新：工作示例

只有当您单击“关于文本”，而不是其他任何地方时，您才会收到警报。
我的标题中有
id=“About”
如何可以单击？@francisunox，因此请使用
$（'#About'）
而不是
$（'.header'））
Bro如果我单击面板的任何部分，它仍然会提示警报。那么，在元素呈现到页面之前，您是否附加了事件？它工作正常。如果我单击标题
about
它将提示警报。您想在单击关于的链接时得到警报吗？是的。我只是用alert来检查它是否被点击了。
$(document).ready( function() {
// wait for page to load
    $("a#about").click( function (){ 
      // do your clicked stuff here
      alert('Hi'); 
    })
});