CODEWITHSUNDEEP
jquerythismouseover
jotyhista
jotyhista

Reputation: 111

Jquery THIS for mouseover event on dynamically generated div

The following function triggered on mouseover is trying to fetch the html text from a dynamically generated object; it returns undefined (I am trying to get the "test")

HTML (generated by php):
<div class="info" onmouseover=hoverdivOpen(event,"popupUserInfoDiv")>test</div>

JS:
function hoverdivOpen(e,divid){
  var v = $(this).text();
  console.log(v);
 // ... rest of code to open the popup div....//
}

Is there a way to deal with this issue like on() for click events ?

Upvotes: 1

Views: 3233

Answers (4)

Daniel Beck
Daniel Beck

Reputation: 21485

Async issues are commonly a source of similar-looking problems (you can't access a DOM node before it exists), but it doesn't seem like that's what's going on in this case.

In the context in which you're invoking the mouseover function, this refers to the window object, not the element that triggered the event.

The element is available on the event object (as event.target).

You can get its contents using innerHTML -- no jQuery required, and you don't need to pass through a class name to use as a selector.

function hoverdivOpen(e){
    console.log(e.target.innerHTML);
}
    <div onmouseover=hoverdivOpen(event)>test</div>

In the jQuery equivalent -- which allows you to separate your html a bit more from the scripting -- this refers to the DOM element instead of the window, so you use that instead of the event:

$('#foo').on("mouseover", function() {
  console.log($(this).html()); // jQuery equivalent to this.innerHTML
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">test</div>

Upvotes: 0

prasanna puttaswamy
prasanna puttaswamy

Reputation: 987

Try this first div mouseover calls javascript function where as second div uses jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div onMouseOver="hoverdivOpen('.test')" class="test">test</div>
<div id="popupUserInfoDiv"> 123 </div>
<script>
function hoverdivOpen(divid){
  var v = $(divid).text();
  console.log(v);
  alert(v);
}
$(document).ready(function(){
$('#popupUserInfoDiv').on('mouseover',function(){
alert($(this).text());
});
})
</script>

Upvotes: 0

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

Yes, You can use .on() delegated event handling with mouseenter, mouseover and mouseleave like this $(document).on("mouseover", "input", function() {});

$("body").append('<input type="text" value="Hello World">');
$(document).on("mouseover", "input", function() {
    console.log( "Hi!" + $(this).val()); // jQuery 1.4.3+
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer for updated question You are confusing jQuery with javascript. You can't just use $(this) inside function to refer div. Instead you can use this keyword in function passing reference to the div and get innetHTML from that in javascript

function hoverdivOpen(e){
  var v =e.innerHTML;
  console.log(v);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover=hoverdivOpen(this)>test</div>

Upvotes: 1

Dan Orlovsky
Dan Orlovsky

Reputation: 1095

First, the reason this is not working is because that object isn't apart of the DOM when the event listener starts. So there's nothing to listen to. The way around it, is to attach the event listener to a parent element, and then delegate to (cheers, @Sanchit) "focus" in on the dynamic event. So, say this is your HTML:

<div id="my-wrapper"><!-- DYNAMIC ELEMENTS GO HERE --></div>

Inside there, you will have dynamic elements (assigning a common class) that you are trying to mouse-over. So the listener will look like:

$("#my-wrapper").on("mouseover", ".common-class", function () {
  $(this).text(); // DO SOMETHING
});

Upvotes: 0

Related Questions