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

2020-02-22 jquery bootstrap-modal

我试图捕捉模式内的按钮单击事件。但这行不通。
我想念什么吗?

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

我在想这是否是因为模态部分尚未加载,除非显示了模态。
我可以得到任何建议吗?万分感谢。

Answers

我认为<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生成的元素,则尝试下面的click方法类型。

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

Related