CODEWITHSUNDEEP
jquery
user5869120
user5869120

Reputation: 119

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

Upvotes: -1

Views: 44

Answers (1)

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 2

Related Questions