Getting ID of DOM Element using $(document).on & mouseenter/mouseleave

Question

Good Morning,

I'm currently looking for a solution to get the DOM element id on two occasions.

Occasion one: When the mouse enters a div get the ID of the div its entered.
Occasion two: When the mouse leaves a div get the ID of the div it left.

It's dynamic content therefore I have the following base code:

$(document).on({
    mouseenter: function(e) {

    },
    mouseleave: function(e) {

    }
}, '.template-builder-template-stream-slot');

However, I'm having problems getting the actual id of the element on the above two occasions.

Thanks for your help!

Unfortunately, I have already tried this and it does not work, yet returns a blank value. — Joshua, Jan 06 '15 at 10:52

James Donnelly · Accepted Answer · 2015-01-06T11:00:32.203

You can simply use this.id, assuming your .template-builder-template-stream-slot element actually has an ID when this code is fired. If it doesn't have an ID, the result will be blank.

$(document).on({
    mouseenter: function(e) {
      console.log("mouseenter on #" + this.id);
    },
    mouseleave: function(e) {
      console.log("mouseleave on #" + this.id);
    }
}, '.example');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure class="example" id="one">This has an ID of "one".</figure>
<figure class="example" id="two">This has an ID of "two".</figure>
<figure class="example">This has no ID at all.</figure>

If we move our cursor over both of these from top to bottom, we'll get the following result in our JavaScript console (note how the last element, which has no ID, returns no value (an empty string)):

Console Log

I added the ID on the wrong element, silly me. This is perfect though, thank you. — Joshua, Jan 06 '15 at 11:01

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

You may use this or e.target.id. For more you may visit Getting the ID of the element that fired an event

edited May 23 '17 at 11:51

Community

1
1

answered Jul 14 '16 at 10:44

pTM

21
2

joews · Answer 3 · 2015-01-06T11:02:03.107

0

Both this and e.target refer to the target element:

var id = e.target.id;
var id = this.id;

If this value is an empty String, the target element does not have an id attribute.

You could verify that this is the case by logging the target elements:

$(document).on({
    mouseenter: function(e) {
        console.log(this); // logs a DOM element
        console.log(this.id); // logs the id if present, or blank otherwise.
    }
}, '.template-builder-template-stream-slot');

edited Jan 06 '15 at 11:02

answered Jan 06 '15 at 10:54

joews

29,767
10
79
91

This is just returning a blank value. – Joshua Jan 06 '15 at 10:56
In that case, your target elements do not have the `id` attribute set. – joews Jan 06 '15 at 10:59

score 0 · Answer 4 · answered Jan 06 '15 at 11:13

0

You may use "e.target.id" for accessing id of the elements inside mouseenter and mouseleave method.

answered Jan 06 '15 at 11:13

Paritosh

505
5
13

Getting ID of DOM Element using $(document).on & mouseenter/mouseleave

4 Answers4