머리글을 클릭 할 수있게 만드는 방법

Question

내 머리글 약 및 친구에 대한 내 머리글을 클릭 할 수 있습니다. 그냥 class = block을 추가하여 클릭 할 수 있고 alert 기능을 사용하고 있는지 확인할 수 있습니다. 하지만 작동하지 않습니다.

<script> 

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

</script> 

헤더

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

Answer 1

$(document).ready(function() { 
// wait for page to load 
    $("a#about").click(function(){ 
     // do your clicked stuff here 
     alert('Hi'); 
    }) 
}); 

출처 : http://www.w3schools.com/jquery/event_click.asp

업데이트 : 작업 예를 https://jsfiddle.net/atg5m6ym/5740/

당신이 요소는 페이지 렌더링되기 전에

Answer 2

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-6" id="about"> 
 
    <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>