Javascript jquery按钮的类选择器没有响应

我正在将jquery合并到一个html文件中，当我点击它时，很难找到一个按钮来产生一些动作。我成功地为我点击div的事件生成了一个警报，但是按钮是另一回事

<script type = "text/javascript">
alert("I am an 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 and 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 to 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>

警报（“我是一个警报框！”）；
$（“div”）。单击（函数（）{
警报（“测试1”）；
}); 
$（“.btn绿色”）。单击（函数（）{
警报（“测试2”）；
});
验证和验证工具统计信息等








要激活的电子邮件地址
验证

---

在页面上出现任何内容之前，您正在运行代码

使用jqueryready包装器

$（函数（）{
//把你的代码放在这里
})

我认为问题可能在于，添加这些事件侦听器时，文档没有完全加载。尝试使用：

$(function() {
   $("div").click(function(){
       alert("test1");
   }); 

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

哪一条是你的捷径

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

将javascript代码包装在里面。您的代码可能会在之前附加事件 DOM加载

或者在页面末尾添加代码

---

将脚本代码包装到document.ready函数中，如下所示：

$(document).ready(function(){
  alert("I am an alert box!"); 

  $("div").click(function(){
    alert("test1");
  }); 

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

$(document).ready(function(){
   // code here
});

$(document).ready(function(){
  alert("I am an alert box!"); 

  $("div").click(function(){
    alert("test1");
  }); 

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