Assign multiple functions to a same class/element using Jquery?

Question

I have started learning Jquery today from W3Schools. I am trying some examples.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.mouseover').mouseover(function () {
                alert("Entered")
            })
        })
    </script>

<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>

I want to assign two functions to the same class mouseover which takes two events mouseenter and mouseleave. I do not want to use hover. I just want to know the process how it can be done?

To assign different methods by selecting a same element. Like clicking on a class will do one thing, hovering over it will do other and so on.

You can write mouseleave() event. Use event preventDefault() or maybe event stopPropagation() — Can Karakoyun
– Can Karakoyun, Commented Aug 21, 2019 at 10:43

Udochukwu Enwerem · Accepted Answer · 2019-08-21 10:49:09Z

1

No need to write separate functions. You can chain both on one object like this

$('.mouseover').on('mouseover', function() {
  console.log("Entered");
}).on('mouseleave', function() {
  console.log("Leave");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>

answered Aug 21, 2019 at 10:49

Udochukwu Enwerem

2,8932 gold badges28 silver badges37 bronze badges

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

Comments

dganenco · Accepted Answer · 2019-08-21 10:51:21Z

0

You should simply assign another event to your selector. Smth like this:

let $el = $('.mouseover');    

$el.on('mouseover', function() {
  console.log("Entered");
});

$el.on('mouseleave', function() {
  console.log("Leave");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>

edited Aug 21, 2019 at 10:51

answered Aug 21, 2019 at 10:46

dganenco

1,6161 gold badge8 silver badges18 bronze badges

2 Comments

Deshwal Over a year ago

my IDE says there are duplicate select statements

dganenco Over a year ago

I've updated my answer. It was only example, your IDE should give you a hot fix for this simply case.

giuseppe · Accepted Answer · 2019-08-21 10:55:57Z

0

Try the following, the problem you can have is that for clicking the item "mouseover" you have to hover it so it triggers the hovering function first... :

    $(document).ready(function () {
        $('.mouseover').mouseover(function () {
            alert("Entered")
        })
    });

        $('.mouseover').click(function () {
            alert("Clicked!")
        });
        
        $('.click').click(function () {
            alert("Clicked!")
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="mouseover">Enter and leave from here</p>
<p class="click">Click and double click here</p>
<p class="hover">Hover over here</p>

edited Aug 21, 2019 at 10:55

answered Aug 21, 2019 at 10:47

giuseppe

1059 bronze badges

Collectives™ on Stack Overflow

Assign multiple functions to a same class/element using Jquery?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related