Ich versuche, das Button-Click-Ereignis in Modal zu erfassen. Aber es funktioniert nicht.
Vermisse ich etwas

Hier ist der Hauptteil der HTML-Datei. Ich benutze 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>

Hier ist der Körperteil von 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>

Es ist eine Javascript-Datei (index.js).

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

Ich denke, wenn es daran liegt, dass der modale Teil noch nicht geladen wird, es sei denn, modal wird angezeigt.
Kann ich einen Rat dafür bekommen? Vielen Dank.

0
jdw 22 Feb. 2020 im 03:02

3 Antworten

Beste Antwort

Wenn dynamically ein Element generiert hat, versuchen Sie es mit der folgenden Art von Klickmethode.

$(document).on("click", "#email-signup", function(event){
  alert('Hello World');
});
0
Raeesh Alam 22 Feb. 2020 im 04:53

Jetzt, da ich den obigen js-Code separat in HTML schreibe, funktioniert es gut.
Ich gehe also davon aus, dass es ein Problem mit der Verbindung zwischen der JS-Datei und der HTML-Datei geben muss.
Ich werde versuchen, es herauszufinden.

{% 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
jdw 22 Feb. 2020 im 02:45

Ich denke, mit der Anordnung Ihrer Skripte im Teil <head> stimmt etwas nicht

Sie können eine der folgenden Optionen ausprobieren:

Ändere das:

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

Dazu:

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

Auf diese Weise wird Ihr Skript als erstes gelesen, bevor sich ein anderes Skript verwickelt.

0
Shizukura 22 Feb. 2020 im 01:22