I try to understand why my jquery script doesn't work at all in my php included files. index.php:
<?PHP
session_start();
include_once("./tools/globalFunction.php");
?>
<!doctype html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Jojo Site</title>
</head>
<body>
<?PHP
include_once("application.php");
include_once("layout/menu.php");
include_once("layout/loginModal.php");
include_once("layout/container.php");
include_once("layout/footer.php");
?>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript" src="./editor/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./js/javaScriptGlobalFunction.js"></script>
</body>
</html>
menu.php:
<div class="collapse navbar-collapse justify-content-end" id="navbarNavConnexion">
<ul class="navbar-nav">
<li id="adminButton" class="nav-item">
<?php
if (!$_SESSION['admin']){?>
<button id="connexion" class="btn btn-dark" href="#" data-toggle="modal" data-target="#loginModal">Connexion</button> <?php ;}
else {?>
<button id="deconnexion" class="btn btn-dark" href="#" >Déconnexion</button> <?php ;}
?>
</li>
</ul>
</div>
javaScriptGlobalFunction.php:
$("#Connexion").click(function(){
alert('connexion')
});
$("#Deconnexion").click( function() {
alert('déconnexion')
});
With those code lines it doesn't work whereas if i put the jquery script include and my script at the end of the menu file like :
<div class="collapse navbar-collapse justify-content-end" id="navbarNavConnexion">
<ul class="navbar-nav">
<li id="adminButton" class="nav-item">
<?php
if (!$_SESSION['admin']){?>
<button id="connexion" class="btn btn-dark" href="#" data-toggle="modal" data-target="#loginModal">Connexion</button> <?php ;}
else {?>
<button class="btn btn-dark" href="#" id="deconnexion">Déconnexion</button> <?php ;}
?>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#deconnexion").click(function(){alert('deconnexion')});
</script>
It's run... Is there something i didn't seen well or i have to place jquery and script directly in each file?
It's probably not working because in javaScriptGlobalFunction.js
you're trying to find elements by id with first letter in uppercase, while in html id is all lowercase. In javaScriptGlobalFunction.js
change
$("#Connexion").click(function(){
alert('connexion')
});
$("#Deconnexion").click( function() {
alert('déconnexion')
});
to
$("#connexion").click(function(){
alert('connexion');
});
$("#deconnexion").click(function() {
alert('déconnexion');
});
At first korrekt lower/higher key: $("#Deconnexion") != id="connexion"
Also your script will run befor your html is rendered by browser. Put it into
$(function () {
$("#connexion").click(function(){
alert('connexion');
});
$("#deconnexion").click(function() {
alert('déconnexion');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.