jquery, javascript not working in bootstrap

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>

Share Improve this question edited Mar 2, 2015 at 19:51 amphetamachine 30.7k12 gold badges67 silver badges74 bronze badges asked Mar 1, 2015 at 15:03 Noah 631 gold badge2 silver badges7 bronze badges

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

| Show 1 more ment

5 Answers 5

Sorted by: Reset to default 2

You 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
 });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery, javascript not working in bootstrap - Stack Overflow

5 Answers 5