jquery, javascript not working in bootstrap

Question

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"> 
                welcome 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>

Best to close your <script> tags with </script>..Sure jQuery is loaded? — Sandeep Nayak
– Sandeep Nayak, Commented Mar 1, 2015 at 15:17
Sandeep, I just did that.. And got an error : Uncaught SyntaxError: Unexpected token ; — Noah
– 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
– Sandeep Nayak, Commented Mar 1, 2015 at 15:21

squiroid · Accepted Answer · 2015-03-01 15:22:18Z

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.com/jquery-2.1.3.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="jumbotron">
      <p class="lead"> 
                welcome 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 :-)

answered Mar 1, 2015 at 15:22

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Noah Over a year ago

was it the script tags you changed?

squiroid Over a year ago

yup just added latest scripts of each category and added your script just before the end of body :-)

squiroid Over a year ago

Happy coding dear :-)

Noah Over a year ago

wait, i just looked at the console, and i got this ;( file://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js Failed to load resource: net::ERR_FILE_NOT_FOUND file://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css Failed to load resource: net::ERR_FILE_NOT_FOUND index.html:20 Uncaught SyntaxError: Unexpected token ;

squiroid Over a year ago

in my answer i deleted that file please delete it from plunker as well Updated plunker plnkr.co/edit/pKaMpLNkGSLtAtvcNvvx?p=preview. I was using cdn for that :-)

|

Michel · Accepted Answer · 2015-03-01 15:07:58Z

1

Ensure that your click handler is declared after the DOM is ready

Like that :

$(document).ready(function(){
    $('#ocs').click(function(){
        // something
    });
});

answered Mar 1, 2015 at 15:07

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Comments

Sagar · Accepted Answer · 2022-04-13 14:08:43Z

1

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.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.6.0.js" ></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

edited Apr 13, 2022 at 14:08

answered Apr 13, 2022 at 12:27

Sagar

214 bronze badges

Comments

arisalexis · Accepted Answer · 2015-03-01 15:08:13Z

0

use the .text() function instead of the .html()

answered Mar 1, 2015 at 15:08

arisalexis

2,2622 gold badges26 silver badges47 bronze badges

2 Comments

Noah Over a year ago

Yeah, I did that.. No effect :(

arisalexis Over a year ago

even if it doesn't fix the problem, its the correct function to use for putting text into an element.

Janx from Venezuela · Accepted Answer · 2015-03-01 15:19:11Z

0

try this:

$(function(){
 $(document).on('click','#ocs',function(e){ // do somethign here
 });
});

answered Mar 1, 2015 at 15:19

Janx from Venezuela

1,2071 gold badge11 silver badges13 bronze badges

Collectives™ on Stack Overflow

jquery, javascript not working in bootstrap

5 Answers 5

7 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related