JQuery doesn't work with bootstrap

Multi tool use
JQuery doesn't work with bootstrap
I have a simple form in html5 with Bootstrap, but my JQuery doesn't work correctly, i'm trying with simply alerts without responses.
<!DOCTYPE html>
<html>
<head>
<title>Index Tecatche</title>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="txt_email" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="txt_pass" placeholder="Password">
</div>
<input type="button" id="btn_enter" class="btn btn-primary" value="Enter">
<input type="button" id="btn_register" class="btn btn-primary" value="Register">
</body>
</html>
JS:
$("#btn_enter").click(function() {
alert("hi");
});
index.js
F12
…/3.3.1 /jquery.min.js
…/3.3.1/jquery.min.js
What errors are you getting in the browser's console?
– j08691
Jul 2 at 2:09
The browser console don't show anything.
– Pabloco
Jul 2 at 4:26
3 Answers
3
Your Js Code needs to Put in the ready().
$(document).ready(function(){
$("#btn_enter").click(function() {
alert("hi");
});
});
there is a space in your jquery path after 3.3.1 ..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
change it to this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Alright now you fixed the jquery path, does it still not work?
I have made a snippet below that uses the same code in your question (the only difference is i used a CDN for bootstrap.js). It seems to work fine when I run it.
Try wrap the event listener in a document ready function. I have updated the snippet below.
$(document).ready(function(){
$("#btn_enter").click(function() {
alert("hi");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Index Tecatche</title>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="txt_email" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="txt_pass" placeholder="Password">
</div>
<input type="button" id="btn_enter" class="btn btn-primary" value="Enter">
<input type="button" id="btn_register" class="btn btn-primary" value="Register">
</body>
</html>
Oh! i didn't see that before post, but i have correctly that line.
– Pabloco
Jul 2 at 1:13
i changed that, but i have the same problem.
– Pabloco
Jul 2 at 3:42
Thanks so much, I was missing that.
– Pabloco
Jul 2 at 15:03
just put your script after body tag and try to not include the index.js in your following libraries
and try this
$(document).ready(function(){
$("#btn_enter").click(function() {
alert("hi");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Index Tecatche</title>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="txt_email" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="txt_pass" placeholder="Password">
</div>
<input type="button" id="btn_enter" class="btn btn-primary" value="Enter">
<input type="button" id="btn_register" class="btn btn-primary" value="Register">
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Is that the entire JS in
index.js
? Have you used the browser console (dev tools) (hitF12
) and read any errors? Is the path to jQuery really…/3.3.1 /jquery.min.js
and not…/3.3.1/jquery.min.js
without the space?– Xufox
Jul 2 at 1:00