CODEWITHSUNDEEP
jquery
user9818089
user9818089

Reputation:

jQuery hover and click method not working for the same element

jQuery's on a method to install the event handlers for the click and mouse hover events for the same element. The problem is that when I just use the hover method, it works but doesn't work with click method.

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyInformation</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p id = "p1">This is paragraph 1</p>
    <p id = "p2">This is paragraph 2</p>
    <p id = "p3">This is paragraph 3</p>
    <script>
        $(p1).on
        ({
            mouseenter: function () 
            {
                $(this).css("color","red");
            },
            mouseleave: function () {
                $(this).css("color","black");
            }
            click: function () {
                alert("hello");
            }
         });
    </script>
</body>
</html>

Upvotes: 1

Views: 48

Answers (3)

Pandurang
Pandurang

Reputation: 76

Two mistakes in your code

  1. $(p1) should be $('#p1')

  2. Comma missing after mouseleave function it should be

    mouseleave: function () {
    $(this).css("color","black");
},
click: function () {
    alert("hello");
}

Upvotes: 0

Sascha Metz
Sascha Metz

Reputation: 1

You've missed the comma after the mouseleave function

$('#p1').on
    ({
        mouseenter: function () one mouse enter
        {
            $(this).css("color","red");
        },
        mouseleave: function () {
            $(this).css("color","black");
        },
        click: function () {
            alert("hello");
        }
     });

Upvotes: 0

Damian Dziaduch
Damian Dziaduch

Reputation: 2127

You have wrong selector and some syntax errors, here is fixed version:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyInformation</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p id = "p1">This is paragraph 1</p>
    <p id = "p2">This is paragraph 2</p>
    <p id = "p3">This is paragraph 3</p>
    <script>
        $('#p1').on
        ({
            mouseenter: function () {
                $(this).css("color","red");
            },
            mouseleave: function () {
                $(this).css("color","black");
            },
            click: function () {
                alert("hello");
            }
         });
    </script>
</body>
</html>

Upvotes: 1

Related Questions