simple jQuery script not working

Question

I am completely baffled as to why this simple jQuery script is not working. I literally copied and pasted the code from another project of mine (in which the code works) and just changed the class tag.

<html>
<head>
    <title>test page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.click_item').click(
                function() {
                    $(this).animate({background: '#ffffff'}, 200);
                },
                function() {
                    $(this).animate({background: '#d0d0d0'}, 200);
                }
            );
    }) 
    </script>
    <style type="text/css">
        #one {
            height: 300px;
            width: 1000px;
            background-color: #a0a0a0;
        }
        .click_item {
            width: 100px;
            height: 30px;
            margin: 0px auto;
            margin-bottom: 10px;
            background: #d0d0d0;
            -moz-transition: background linear;
            -webkit-transition: background linear;
        }
    </style>
</head>

<body>

    <div id="one">
        <div id="map_options_box">
            <div id="kml1" class="click_item">item 1</div>
            <div id="kml2" class="click_item">item 2</div>
        </div>
    </div>

</body>

I also tried using the #kml1 and #kml2 ID tags instead of class and 'this' tags, as well as replacing the click function with hover and toggle,still didn't work. I'm not receiving any errors in the console either.

You are calling two functions inside jQuery click event and that too changing the background of this element. Which one the function will consider? Call anyone function for the same event for the same element. — arulmr
– arulmr, Commented Sep 14, 2012 at 19:53

mgraph · Accepted Answer · 2012-09-14 20:03:16Z

12

You will need to include the jQuery color animations plugin., because native jquery does not support this feature

edited Sep 14, 2012 at 20:03

answered Sep 14, 2012 at 19:50

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rich Bradshaw Over a year ago

And also be aware that jQuery 1.8 breaks the version that a lot of people were using – if you get console errors about curCSS, then you either need 1.7 or lower, or to update the color plugin.

user1477388 · Accepted Answer · 2012-09-14 19:53:39Z

1

Try:

<script type="text/javascript">
$(document).ready(function() {
        $('.click_item').click(
            function() {
                $(this).animate({background: '#ffffff'}, 200);
            },
            function() {
                $(this).animate({background: '#d0d0d0'}, 200);
            }
        );
});
</script>

answered Sep 14, 2012 at 19:53

user1477388

21.6k35 gold badges152 silver badges277 bronze badges

6 Comments

A.M.K Over a year ago

The last semicolon doesn't make a difference. But, you can't use multiple functions on a click event.

user1477388 Over a year ago

I didn't think so, I thought that looked funny.

user1477388 Over a year ago

Should that comma be replaced with a semicolon?

j08691 Over a year ago

Multiple functions in a click event aren't allowed and don't make sense anyway. Plus that's not the core problem. mgraph got it.

A.M.K Over a year ago

Multiple functions do make sense, mouseup and mousedown. The same as a hover event (mouseover and mouseout). And, yes, mgraph got it.

|

Collectives™ on Stack Overflow

simple jQuery script not working

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related