I'm using JQuery and bootstrap, and when I try to click the button that should invoke the function, it doesn't work. I've looked in the developer console and there is nothing there, anyone know?
<html>
<head>
<title>Bill</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jumbotron-narrow-me.css"/>
<script src="js/jquery-2.1.3.min.js"/>
<script src="js/bootstrap.min.js"/>
<script type="text/javascript">
var count=0;
$('#ocs').click(function(){
count++;
$('#cookies').html('0Cs : ' + count);
});
</script>
</head>
<body>
<div class="jumbotron">
<p class="lead">
wele to opposition clicker, its amazing. it has one upgrade.
"opposition" when you get this, you will get +100 0Cs' every second.
</p>
<br><br/>
</div>
<div class="container" id="cookies">aasasa</div>
<button id="ocs" type="button" class="btn btn-lg btn-success">0Cs'</button>
</body>
</html>
I'm using JQuery and bootstrap, and when I try to click the button that should invoke the function, it doesn't work. I've looked in the developer console and there is nothing there, anyone know?
<html>
<head>
<title>Bill</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jumbotron-narrow-me.css"/>
<script src="js/jquery-2.1.3.min.js"/>
<script src="js/bootstrap.min.js"/>
<script type="text/javascript">
var count=0;
$('#ocs').click(function(){
count++;
$('#cookies').html('0Cs : ' + count);
});
</script>
</head>
<body>
<div class="jumbotron">
<p class="lead">
wele to opposition clicker, its amazing. it has one upgrade.
"opposition" when you get this, you will get +100 0Cs' every second.
</p>
<br><br/>
</div>
<div class="container" id="cookies">aasasa</div>
<button id="ocs" type="button" class="btn btn-lg btn-success">0Cs'</button>
</body>
</html>
- Check your log. Any errors? – kockburn Commented Mar 1, 2015 at 15:05
-
2
Best to close your
<script>tags with</script>..Sure jQuery is loaded? – Sandeep Nayak Commented Mar 1, 2015 at 15:17 - Sandeep, I just did that.. And got an error : Uncaught SyntaxError: Unexpected token ; – Noah Commented Mar 1, 2015 at 15:19
-
Do this...bind your click event using
.on.. like this$('#ocs').on('click', function(){...your code goes here...});– Sandeep Nayak Commented Mar 1, 2015 at 15:21 - Done that, same error :/ – Noah Commented Mar 1, 2015 at 15:22
5 Answers
Reset to default 2You just need to close some script tags properly and place your script in the bottom:-)
<html>
<head>
<title>Bill</title>
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery./jquery-2.1.3.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn./bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<p class="lead">
wele to opposition clicker, its amazing. it has one upgrade.
"opposition" when you get this, you will get +100 0Cs' every second.
</p>
<br />
<br />
</div>
<div class="container" id="cookies">aasasa</div>
<button id="ocs" type="button" class="btn btn-lg btn-success">0Cs'</button>
<script type="text/javascript">
var count=0;
$('#ocs').click(function(){
count++;
$('#cookies').html('0Cs : ' + count);
});
</script>
</body>
</html>
Plunker
PS:- I didn't added the jumbotron-narrow-me.css in example because it is not available on plunker but hope it helps :-)
Ensure that your click handler is declared after the DOM is ready
Like that :
$(document).ready(function(){
$('#ocs').click(function(){
// something
});
});
Today I have found the solution to this question. If anyone is struggling with same problem in 2022 then you just have to make use of script tags and Jquery tags as given below:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery./jquery-3.6.0.js" ></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
use the .text() function instead of the .html()
try this:
$(function(){
$(document).on('click','#ocs',function(e){ // do somethign here
});
});