Josh90 Josh90 - 9 months ago 34
jQuery Question

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

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

  • 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:

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!


You can simply use, 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.

    mouseenter: function(e) {
      console.log("mouseenter on #" +;
    mouseleave: function(e) {
      console.log("mouseleave on #" +;
}, '.example');
<script src=""></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