jquery，javascript在引导程序中不起作用

jquery, javascript not working in bootstrap

本文关键字：不起作用 引导程序 javascript jquery      更新时间：2023-09-26

我正在使用JQuery和bootstrap，当我试图单击应该调用该函数的按钮时，它不起作用。我看了开发者控制台，什么都没有，有人知道吗？

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

您只需要正确关闭一些脚本标记并放置脚本底部：-）

<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

附言：-我没有在示例中添加jumbotron-n窄带.css，因为它在plunker上不可用，但希望它能有所帮助：-）

确保在DOM准备就绪后声明您的点击处理程序

比如：

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

今天我找到了这个问题的解决方案。如果有人在2022年遇到同样的问题，那么你只需要使用下面给出的脚本标签和Jquery标签：

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

使用.text（）函数而不是.html（）

试试这个：

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