toggle class with Jquery not working

Question

I am trying to toggle a buton class with jquery, but it's not working, here's the code:

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

What am I doing wrong?

You can see it here: http://ocozinheiroperfeito.businesscatalyst.com/

score 3 · Answer 1 · answered Mar 30 '15 at 09:19

Your code in not working because you are getting this error:

ReferenceError: $ is not defined

Solution: you should include jquery library in your page before using jquery.

Use following code to include jquery library:

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

score 1 · Answer 2 · answered Mar 30 '15 at 09:20

1

Your code is ok. Check the fiddle.
When I open your site I see the following console error:

Uncaught ReferenceError: $ is not defined

You should add the JQuery reference before it's used.

answered Mar 30 '15 at 09:20

Amir Popovich

29,350
9
53
99

I did that but it is still not doing anything to the button.The shadow is suposed to disapear wen clicked so it looks like 3d effect – Marco Alex Apr 02 '15 at 14:07

score 0 · Answer 3 · answered Mar 30 '15 at 09:22

0

In addition to the other answers, you also need to wrap your click handler definition inside document.ready(), otherwise the event listener will not be added "in time" before you raise any click event.

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

answered Mar 30 '15 at 09:22

Veverke

9,208
4
51
95

I added the jquery before the script and the document ready function too. It is still not working, when we click the green button at the bottom of the page. the shadow of the button is suposed to disapear to look like the buton was pressed.Instead a pop window apears and the classes of the button dont toggle. – Marco Alex Mar 31 '15 at 11:38

score 0 · Answer 4 · answered Mar 30 '15 at 09:26

The problem is you are inlcuding jQuery at the bottom of the page, but you have code that make use of jQuery before that.

So either move jQuery include to the header

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

Or move all script blocks that uses jQuery to bottom of the page after including jQuery

toggle class with Jquery not working

4 Answers4