Question

我正在尝试捕获模式内部的按钮单击事件。但这不起作用。
我想念什么吗？

这是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">&times;</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");
    });
});

我在想这是否是因为模态部分尚未加载，除非显示了模态。
我能得到任何建议吗？非常感谢。

Answer 1

我认为<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>

这样，您的脚本将成为第一个被其他脚本缠结的人阅读的

。

Answer 2

现在我用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>

Answer 3

如果dynamically生成了元素，则尝试使用以下点击方法类型。

$(document).on("click", "#email-signup", function(event){
  alert('Hello World');
});

按钮事件在Bootstrap模式下不起作用

3 个答案: