我正在尝试捕获模式内部的按钮单击事件。但这行不通。我想念什么吗？
这里是html文件的头部。我正在使用Django。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type = "text/javascript" src="{% static 'index.js' %}"></script>
<link rel = "stylesheet" href = "{% static 'style.css' %}">
</head>
这里是html的正文部分。
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row mx-2 justify-content-between">
<h5 class="modal-title" id="exampleModalLabel">Welcome</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<p><br></p>
<p class="text-center font-weight-bold font-italic d-flex align-items-end">example text</p>
</div>
</div>
<div class="modal-body justify-content-center">
<div class="row justify-content-center mb-md-3">
<button type= "button" class="btn col-md-5 col-sm-7 border border-info ">Google
</button>
</div>
<div class="row justify-content-center mb-md-3">
<button type= "button" class="btn col-md-5 col-sm-7 border border-info ">Facebook
</button>
</div>
<div class="row justify-content-center mb-md-3">
<button class="btn col-md-5 col-sm-7 border border-info" id="email-signup" type="button">Email
</button>
</div>
</div>
</div>
</div>
</div>
是javascript文件（index.js）。
$(function(){
$("#email-signup").on("click", function(event){
alert("hello");
});
});
我在考虑是否是因为模态部分尚未加载，除非显示了模态。我可以得到任何建议吗？非常感谢。
我认为<head>部分中的脚本排列有问题
您可以尝试以下选项之一：
更改此：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type = "text/javascript" src="{% static 'index.js' %}"></script>
<link rel = "stylesheet" href = "{% static 'style.css' %}">
至此：
<script type = "text/javascript" src="{% static 'index.js' %}"></script>
<link rel = "stylesheet" href = "{% static 'style.css' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
这样，您的脚本将是第一个在其他脚本缠结之前首先阅读的语言。
现在，我用html单独编写上述js代码，效果很好。因此，我认为js文件和html文件之间的连接必定有问题。我会设法弄清楚。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="{% static 'index.js' %}" type="text/javascript"></script>
<script>
$(function(){
$("#email-signup").on("click", function(event){
alert("hello");
});
});
</script>
<link href="{% static 'style.css' %}" rel="stylesheet">
</head>
如果dynamically生成了元素，则尝试使用以下点击方法类型。
$(document).on("click", "#email-signup", function(event){
alert('Hello World');
});