Question

我确实尝试了Internet上的所有解决方案，但仍然无法弄清为什么我的jQuery无法启动。

主要目的是在单击“ addUser-div”时显示一个模式，但是当我单击div时，什么也没有发生。

我在页面上使用了完全相同的代码，只有HTML（没有php），并且jQuery能够正常运行，我只是无法找出问题所在，所有jQuery函数都会出现这种情况，以为我可以看到我的js已正确加载到页面中。

这是users.php代码：

<?php
session_start();
if (isset($_SESSION['role']) && $_SESSION['role'] == 1) {

    ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>


    <link rel="stylesheet" type="text/css" media="screen" href="../css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../css/styles.css" />
    <script type="text/javascript" src="../script/date_time.js"></script>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


    <script type="text/javascript">
      $('.addUser-div').click(function() {
        $('.modal').modal('show')
      })
    </script>

  </head>


  <title>Espace de Connexion</title>

  <nav class="navbar navbar-expand-lg bg-dark navbar-dark static-top">

    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="../images/Logoestia.png" class="img-responsive" width="150" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item "><a class="nav-link" href="./panel.php">Tableau De Bord
							<span class="sr-only">(current)</span>
					</a></li>

          <li class="nav-item "><a class="nav-link" href="./armoires.php">Gestion des Armoires
							<span class="sr-only">(current)</span>
					</a></li>

          <li class="nav-item "><a class="nav-link" href="./outils.php">Gestion des Outils
							<span class="sr-only">(current)</span>
					</a></li>

          <li class="nav-item active"><a class="nav-link" href="./users.php">Gestion Employ&eacute;s
							<span class="sr-only">(current)</span>
					</a></li>
          <li class="nav-item"><a class="nav-link" href="../logout.php">D&eacute;connexion
							<span class="sr-only">(current)</span>
					</a></li>



        </ul>
      </div>
    </div>
  </nav>

  </head>

  <body>
    <h2 class="display-4">Gestion utilisateurs</h2>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <div class="container">
      <div class="row">
        <INPUT type=button value="Retour " onClick="history.back();">
        <div class="col-md-6 addUser-div" style="cursor: pointer;">
          <div class="card-counter info">
            <i class="fa fa-users"></i>
            <span class="count-numbers">
                    <?php
session_start();
    echo $_SESSION["userCount"];?>
                   </span>
            <span class="count-name">Ajouter un Utilisateur</span>
          </div>
        </div>

        <div class="col-md-6" style="cursor: pointer;" onclick="window.location='../panel/prep.jsp';">
          <div class="card-counter danger">
            <i class="fa fa-trash"></i> <span class="count-name">Supprimer
						un utilisateur</span>
          </div>
        </div>


      </div>
    </div>
    <div class="modal modal-dialog" id="infos">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Ajouter un Utilisateur</h4>

          </button>
        </div>
        <div class="modal-body">

          <div style="display: flex; width: 100%;">
            <form action="./CreaterUserServlet">

              <div style="width: 100%;">
                <p>Nom</p>
                <input type="text" name="n" placeholder="Nom" required="required" />
              </div>
              <div style="width: 100%;">
                <p>Login</p>
                <input type="text" name="u" placeholder="Identifiant" required="required" />
              </div>
              <div style="width: 100%;">
                <p>Mot de passe</p>
                <input type="password" name="p" placeholder="Mot de Passe" required="required" />
              </div>

              <div style="width: 100%;">
                <p>Role</p>
                <select name="role-select">
                  <option value="">Veuillez choisir..</option>
                  <option value="1">ADMIN</option>
                  <option value="2">PREPARATEUR</option>
                  <option value="3">COMMERCIAL</option>
                  <option value="4">EXPEDITEUR</option>

                </select>
              </div>

              <p>
                <input type="submit" class="btn btn-primary btn-block btn-large" value="Ajouter">
              </p>
            </form>
          </div>

        </div>

      </div>



    </div>


    <?php include 'usersTable.php';?>








  </body>

  <footer>
    <p>M.Ramzi</p>
  </footer>

  </html>

  <?php

}else {
    header("location: ../index.php");

}
?>

Answer 1

您正在尝试在div在DOM中存在之前将click事件绑定到div。将事件监听器包装在准备好的文档中：

$(document).ready(function() {
  $('.addUser-div').click(function() {
    $('.modal').modal('show');
  })
});

此外，您还要两次加载引导程序库；那不是很好。删除以下行之一： <script src="../js/bootstrap.min.js"></script>

jQuery函数无法在php页面上触发

1 个答案: