It is a caching issue. When you was developing and testing your JQuery code, your old code remained into the browser cache. Browser cached it to load page faster in next uses. In order to solve this problem you have 3 options.
- Delete your browser history
- Refresh your browser by pressing Ctrl + F5 (Preferred for developing purpose)
- Tell browser that this JQuery code has changed by adding a version for it. It is used when you are publishing your code on the server because you can’t ask your clients to delete their browser history or load your page by pressing Ctrl + F5
Here is how you could add version to your JQuery code:
<script type="text/javascript" src="js/script.js?v=1"></script>
Look at v=1. Next time when you updated your JQuery code change it to v=2 to tell browser that your code has been changed.
You can try the next thing,
First of all, your HTML markup I think it might be wrong as you are not pointing out correctly the folders.
I attached all the css and js bootstrap + jquery files through a CDN.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title> jQuery button click event working?</title>
</head>
<body>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
</body>
</html>
Therefore,your script.js stays as it is.
For me it has worked like this. I got the message printed onto my console.
Hope that helps you.
Make sure you don’t have another element in the HTML with the same id.
I have following HTML,
$(document).ready(function() {
$('#searchMovieBtn').click(function(e) {
e.preventDefault();
console.log('search');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
When I click on button, nothing happens, it seems like event is not triggering.
Also make sure the button ID is unique entire the page by searching the page source because the ID selector selects the first occurance.
It seems that I have another problem, when I open HTML locally it works fine, when I run it on server, click doesn’t work (only on button)
Is it a single HTML file or it is being generated by combining multiple files on the server? if It is a dynamic page the server result may be different from the locally opened file.
@MarkoLazarevic Isn’t it a caching issue? Did you try to clear chrome cache by pressing
Thank you for your answer, I don’t think that is the problem, other jquery stuff are working, like click on
