Button event does not work inside Bootstrap modal

Question

I am trying to catch the button click event inside modal. But it does not work.
Am I missing something?

Here is the head part of html file. I am using 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>

Here is the body part of 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>

It is javascript file(index.js).

$(function(){
    $("#email-signup").on("click", function(event){
        alert("hello");
    });
});

I am thinking if it is because the modal part does not load yet unless modal is shown.
Can I get any advice for it? Thank you a lot.

@Shizukura I have added the head part. Can you check it please? — jdw, Feb 22 '20 at 00:46

score 0 · Answer 1 · answered Feb 22 '20 at 01:22

0

I think there is something wrong with the arrangement of your scripts in the <head> part

you might try one of options:

change this:

<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' %}">

to this:

<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>

That way your script will be the first to read before any other script tangles.

answered Feb 22 '20 at 01:22

Shiz

695
10
27

Just comment if it doesn't work, I'll update my answer – Shiz Feb 22 '20 at 01:24
Thank you for your comment. But it still does not work. – jdw Feb 22 '20 at 01:28
That's weird, it's working on me. Is there an output in your console when you click it? – Shiz Feb 22 '20 at 01:31
At the console, I can see that it invokes "Uncaught ReferenceError: $ is not defined at index.js:9" error – jdw Feb 22 '20 at 01:41
so that's where the problem is, can you show inside `index.js`? – Shiz Feb 22 '20 at 01:44
It is as written in the above content of mine. I think the error console happens because "index.js" is loaded before jquery cdn, meaning that $ syntax cannot be interpreted. – jdw Feb 22 '20 at 01:51

score 0 · Answer 2 · answered Feb 22 '20 at 02:45

Now that I write the above js code separately in html, it works well.
So, I assume that there must be a problem on the connection between js file and html file.
I will try to figure it out.

{% 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>

The problem was , Chrome was holding the past version of JS file although it has been modified. I have figured it out from this QnA. (https://stackoverflow.com/questions/15641474/django-not-reflecting-updates-to-javascript-files) — jdw, Feb 22 '20 at 03:14

score 0 · Accepted Answer · answered Feb 22 '20 at 04:53

0

If dynamically generated element then you try below type of click method.

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

answered Feb 22 '20 at 04:53

Raeesh Alam

3,380
1
10
9

Button event does not work inside Bootstrap modal

3 Answers3