jQuery hover and click method not working for the same element

Question

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>

It should be $('#p1') :)

Rohit Sharma
– Rohit Sharma

2018-10-02 05:07:32 +00:00
Commented Oct 2, 2018 at 5:07 — Rohit Sharma
– Rohit Sharma, Commented Oct 2, 2018 at 5:07

Damian Dziaduch · Accepted Answer · 2018-10-02 05:08:18Z

1

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>

answered Oct 2, 2018 at 5:08

Damian Dziaduch

2,1231 gold badge15 silver badges16 bronze badges

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

Comments

Rohit Sharma · Accepted Answer · 2018-10-02 05:12:00Z

0

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

edited Oct 2, 2018 at 5:12

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

answered Oct 2, 2018 at 5:10

Sascha Metz

11 bronze badge

Comments

Rohit Sharma · Accepted Answer · 2018-10-02 05:31:43Z

0

Two mistakes in your code

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

Comma missing after mouseleave function it should be

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

edited Oct 2, 2018 at 5:31

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

answered Oct 2, 2018 at 5:18

Pandurang

7610 bronze badges

Collectives™ on Stack Overflow

jQuery hover and click method not working for the same element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related