Событие кнопки не работает внутри Bootstrap модально - PullRequest
Новая
       15

Событие кнопки не работает внутри Bootstrap модально

0 голосов
/ 22 февраля 2020

Я пытаюсь поймать событие нажатия кнопки внутри модального. Но это не работает.
Я что-то упустил?

Вот основная часть файла 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");
    });
});

Я думаю, так ли это, потому что модальная часть еще не загружается, если не отображается модальная.
Могу ли я получить какой-нибудь совет для этого? Большое спасибо.

Ответы [ 3 ]

0 голосов
/ 22 февраля 2020

Теперь, когда я пишу вышеуказанный код js отдельно в html, он работает хорошо.
Итак, я предполагаю, что должна быть проблема в соединении между файлом 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>
0 голосов
/ 22 февраля 2020

Если dynamically сгенерированный элемент, попробуйте метод щелчка ниже типа. 

$(document).on("click", "#email-signup", function(event){
  alert('Hello World');
});
0 голосов
/ 22 февраля 2020

Я думаю, что что-то не так с расположением ваших скриптов в <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>

Таким образом, ваш скрипт будет первым, кто прочитает, прежде чем любой другой скрипт запутается.

...