asked on

Using jQuery, doubleclick event on a button doesn't work. Is that really the way it is?

I'm playing around with the sample below.

Note the "Grow Right" button, which makes the <div> expand to the right in width. I wanted to add a double-click event handler to that button to make it shrink back to its original size. Then I realized the double-click wasn't working. Can anyone tell me what I'm doing wrong?

Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Animating an Element</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#right").click(function() {
                $("#theDiv").animate({ width: "500px" }, 1000);
            });
                /************************************************************ 
                   THIS DOUBLECLICK EVENT HANDLER IS NOT WORKING. WHAT AM I DOING WRONG? 
                 ************************************************************/
		$("#right").doubleclick(function() {
                    alert("You double-clicked me!");
		$("#theDiv").animate({ width: "250px" }, 1000);
            });
            $("#text").click(function() {
                $("#theDiv").animate({ fontSize: "24pt" }, 1000);
            });
            $("#toggle").click(function() {
                $("#theDiv").animate({ left: "500" }, 1000, "swing");
            });
            $("#multiple").click(function() {
                $("#theDiv").animate({ width: "500px", fontSize: "24pt", left: "500" }, 1000, "linear");
            });
        });
    </script>
    <style type="text/css">
        div#theDiv {
            position:relative;
            width: 250px;
            height: 180px;
            margin: 10px;
            padding: 20px;
            background: cyan;
            border: 2px solid black;
            cursor: pointer;
        }
        p, span {
            font-size: 16pt;
        }
        button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>
        Animating an Element</p>
    <div id="theDiv">Animate Me</div>
    <button id="right">Grow Right</button>
    <button id="text">Big Text</button>
    <button id="toggle">Move Div</button>
    <button id="multiple">Everything</button>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

vr6r

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

elepil

ASKER

Thanks!