J. Gal February 2016

Jquery not working properly?

I'm having trouble with jquery.
At the end of my page, before closing the </body> tag, I have included the jquery cdn:

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

Then at the top, in the <head>, I included my own little code:

<script>
        $(document).ready(function() {
            $('#liked').click(function() {
                $('#changed').addClass('likeClicked');
            });
        });
</script>

This is affecting the following:

<button id='changed' class="like">
     <span class="glyphicon glyphicon-heart" id='liked' style="font-size:2.0em;"></span>
</button>

However, the code isn't working. (CSS below). I've tried changing the jquery to hover instead of click, to different classes or elements instead of id's. I don't know what i'm doing wrong.. any idea? Thanks.

.like {
-webkit-appearance: none;
outline: none;
border: 0;
background: transparent;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.likeClicked {
color: #00bc0e;
}

Answers


charlietfl February 2016

Order of loading is important. Your code is dependent on the jQuery library so the library needs to load before your code.

If you look in your browser console you will currently see error $ is not defined. This will stop all further script execution in the page

Post Status

Asked in February 2016
Viewed 3,546 times
Voted 12
Answered 1 times

Search




Leave an answer