переключения класс с Jquery не работает

Question

Я пытаюсь переключить класс бутона с JQuery, но это не работает, вот код:

.botaoclique{ 
    box-shadow: 0px 0px 00px #000000; 
} 
.formulario-rodape{ 
    box-shadow: 0px 0px 00px #000000; 
} 
<input class="cat_button formulario-rodape botao-verde" type="submit" value="Subscrever" id="catlistbutton" /></div> 
      <script type="text/javascript"> 
$("input.formulario-rodape").click(function() { 
    $(this).toggleClass("botaoclique"); 
}); 
</script> 

Что я делаю неправильно?

Вы можете увидеть здесь: http://ocozinheiroperfeito.businesscatalyst.com/

Answer 1

Вашего код в не работает, потому что вы получаете эту ошибку:

ReferenceError: $ is not defined 

Решения: вы должны включать библиотеку Jquery на странице перед использованием JQuery ,

Используйте следующий код, чтобы включить Jquery библиотека:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

Answer 2

Ваш код нормально. Проверьте the fiddle.
Когда я открываю свой сайт, я вижу следующее сообщение об ошибке консоли:

Uncaught ReferenceError: $ is not defined 

Вы должны добавить ссылку JQuery, прежде чем она используется.

Answer 3

В дополнение к другим ответам вы также должны обернуть определение обработчика кликов внутри document.ready(), иначе прослушиватель событий не будет добавлен «вовремя», прежде чем вы поднимете какое-либо событие click.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("input.formulario-rodape").click(function() { 
     $(this).toggleClass("botaoclique"); 
     }); 
    }); 
</script> 

Answer 4

Проблема заключается вы inlcuding JQuery в нижней части страницы, но у вас есть код, которые делают использование JQuery до этого.

Так как движение JQuery включают в заголовок

<script src="https://code.jquery.com/jquery.js"></script> 

Или переместить все блоки сценарий, который использует JQuery в нижней части страницы после включения JQuery