javascript - class selectors for jquery buttons not responsive -

i'm incorporating jquery html file , have had trouble getting button produce action when click on it. i've managed produce alert event whereby click on div, button different matter.

<script type = "text/javascript"> alert("i alert box!");   $("div").click(function(){     alert("test1"); });   $(".btn-green").click(function(){     alert("test2"); });     </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div class="page-content-wrapper">     <div class="page-content">          <!-- begin page header-->         <div class="row">              <div class="col-md-12">                 <!-- begin page title & breadcrumb-->                 <h3 class="page-title">                 verification & validation tools <small>statistics , more</small>                 </h3>                 <ul class="page-breadcrumb breadcrumb">                     <li>                         <i class="fa fa-home"></i>                         <a href="index.html">home</a>                         <i class="fa fa-angle-right"></i>                     </li>                     <li>                         <a href="#">users</a>                     </li>                     <li class="pull-right">                         <div id="dashboard-report-range" class="dashboard-date-range tooltips" data-placement="top" data-original-title="change overview date range">                             <i class="fa fa-calendar"></i>                             <span>                             </span>                             <i class="fa fa-angle-down"></i>                         </div>                     </li>                 </ul>                 <!-- end page title & breadcrumb-->             </div>         </div>         <!-- end page header--> <form class="form-horizontal" method="post" action="validateuser" >     <div class="validate">         <div class="form-group">             <label class="col-md-2 control-label">email address activate</label>             <div class="col-md-5"><input class="form-control" type="text" name="emailaddress"></input></div>             <button type="submit" class="btn-green"><i class="fa fa-check"></i> validate</button>         </div>     </div> </form> </div> 

i think problem may document not loaded when add event listeners. try use:

$(function() {    $("div").click(function(){        alert("test1");    });      $(".btn-green").click(function(){        alert("test2");    }); }); 

which shortcut

$(document).ready(function() { ... });