外部js脚本在View（ASP.NET）中不起作用

Question

我有外部js脚本，例如我在其中编写此代码

    $('#save').click(function () {
    alert('Clicked');
});

鉴于我有按钮

 <div class="form-group" style="text-align:center">
    <input type="button" id="save" value="Create"  style="border-radius:30px; background: #1d69b4; border-color: #1d69b4;width: 250px; color: white;" class="btn btn-default" style="margin-right: 40px;" />
</div>

在View的标题中，我放置了这样的脚本

 <script src="~/Scripts/jquery-3.2.1.js"></script>
<script src="~/Scripts/HTMLCanvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="~/Scripts/PatientDatabaseScripts/AddingPatient.js"></script>

当我单击按钮时，它什么也不做，没有任何警报。 在开发控制台中没有错误。

但是，当我通过function编写alert，并在按钮中放置代码onclick = "save()" ，一切正常。

我的问题在哪里？

Answer 1

可能是您尝试在尚未加载的DOM元素上附加事件处理程序。

您可以做的一件事是将JS包装在“ ready”块中，如下所示：

$(document).ready(function(){
    $('#save').click(function () {
      alert('Clicked');
    });
})