javascript - 外部 js 脚本在 View (ASP.NET) 中不起作用

Question

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

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

在 View 中我有按钮

 <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 编写警报，并在按钮中输入代码 onclick = "save()" 时，一切正常。

我的问题出在哪里？

Answer 1

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

您可以做的一件事是将 JS 包装在“就绪” block 中，如下所示:

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