2015-03-01 2 views
1

Я использую JQuery и bootstrap, и когда я пытаюсь нажать кнопку, которая должна вызывать функцию, она не работает. Я посмотрел в консоли разработчика, и там ничего нет, кто-нибудь знает?jquery, javascript не работает в 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> 
+0

Проверьте свой журнал. Любые ошибки? – rottenoats

+0

Да, я проверил. – Noah

+2

Лучше всего закрыть ваши '' ..Sure jQuery загружен? –

ответ

2

Вам просто нужно закрыть некоторые теги сценария правильно и разместить скрипт в нижней :-)

<html> 

    <head> 
    <title>Bill</title> 
    <script data-require="[email protected]*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" 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: - Я не добавил JumboTron-узкий меня. css в примере, потому что он недоступен на plunker, но надеюсь, что это поможет :-)

+0

Это были теги скриптов, которые вы изменили? – Noah

+0

yup просто добавил последние скрипты каждой категории и добавил ваш скрипт незадолго до конца тела :-) – squiroid

+0

wow, thanks! : D – Noah

1

Убедитесь, что ваш обработчик щелчка объявлен после DOM готов

Как что:

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

Я добавил в $ (document.ready (function() {})); – Noah

+0

Это '$ (document) .ready (...)' –

0

использовать .text() функцию вместо .html()

+0

Да, я сделал это. Никакой эффект :( – Noah

+1

, даже если он не исправит проблему, его правильную функцию использовать для помещения текста в элемент – arisalexis

+0

oh, ok. thanks :) – Noah

0

Пробуйте следующее:

$(function(){ 
$(document).on('click','#ocs',function(e){ // do somethign here 
}); 
}); 
Смежные вопросы