CODEWITHSUNDEEP
javascriptjqueryhtml
Yannick Huber
Yannick Huber

Reputation: 617

How to get the element that was used as event selector

I got the following problem.

I got an div with is filled with different elements and that has a mouserover-event. I need to use the div in the mouseover-function. The Problem is that i can't select the div via it's class because there are many automaticaly created divs with the same class.

I have tryed to use event.targetbut it returns the object that is inside the that that was used as selector.

$(".outer").on("mouseover",function(event){
  alert("event.target.className is: " + event.target.className);
});
.inner{
  background-color:#ccc; 
  min-width:100px;
  width:100%;
  min-height:100px;
  height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "outer">
  <div class="inner">
    here
  </div>                                         
 </div>

Is there any way to get the div outer on mouseover without selecting it by it's class?

I also can't just use $(event.target).parent() because there can be deeper nested structures inside the outer div that are dynamically created

Upvotes: 0

Views: 95

Answers (5)

Cam Tullos
Cam Tullos

Reputation: 2577

Have you tried event.currentTarget

Example: http://codepen.io/camtullos/pen/bgQNoa?editors=1111

$(".outer").on("mouseover",function(event){
  console.log(event.currentTarget.className);
});

Upvotes: 0

Esko
Esko

Reputation: 4207

The way I understood the question is you really want to use mouseover event on the .inner div(s). With the example you provided, what would happen if .outer div had padding for example? The event would still trigger even though we are not hovering over .inner div at all. So I would change the event attaching a little and use jQuerys .closest-method to travel back up to the parent div:

var $container = $(".outer");
$container.on("mouseover", ".inner", function(event) {
  console.log($(this).closest(".outer").attr("class"));
  // or since in this case you know it's the same element:
  // console.log($container.attr("class"));
});
.outer {
  padding-top: 30px;
  background: Red;
}
.inner {
  background-color: #ccc;
  min-width: 100px;
  width: 100%;
  min-height: 100px;
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    here
  </div>
  <div class="inner">
    here 2
  </div>
</div>

Upvotes: 1

Jordi Flores
Jordi Flores

Reputation: 2150

Like this?

I don't understant why you can't use parent

Well, you can get the current listener object just by using "this"

$(".outer").on("mouseover", function(event){
  var obj = $(this);
  
  console.log(obj.hasClass("outer"))
});
.inner{
  background-color:#ccc; 
  width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="outer">
  <div class="inner">
    here
  </div>                                         
 </div>

<div class="outer">
  <div class="inner">
      <div>
        <div>
          <div>
            <div class="someclass">
              <div>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                deeeeeeeep inside
              </div>
            </div>
          </div>
        </div>
    </div>
    there
  </div>                                         
 </div>

Upvotes: 0

RRajani
RRajani

Reputation: 409

Use this instade of event.target

this trigger current selector.

$(".outer").on("mouseover",function(event){
  alert("event.target.className is: " + this.className);
});

Upvotes: 0

Manish Joy
Manish Joy

Reputation: 486

Hope, this would work for you:

$(".outer").on("mouseover",function(event){
  alert("event.target.className is: " + $(event.target).parent().attr('class'));
});
.inner{
  background-color:#ccc; 
  min-width:100px;
  width:100%;
  min-height:100px;
  height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "outer">
  <div class="inner">
    here
  </div>                                         
 </div>

Upvotes: 0

Related Questions