CODEWITHSUNDEEP
jquery
evelyn
evelyn

Reputation: 89

jQuery .on delegated mouseenter mouseleave not working

It will work on the first dynamic created link, but it won't work on the other links. Also, the popup information is already shown before it hovers for some reason. This is what i have:

<div id="parent">
<a href="" id="hovertitle">Hover Text</a>
</div>

<div id="popup">
    testing 123
</div>

This is my jfiddle including the jquery link http://jsfiddle.net/2XG9j/1/ It works on the jfiddle, but when I run it with my dynamic objects it doesn't work for the other links.

Upvotes: 1

Views: 109

Answers (1)

guest271314
guest271314

Reputation: 1

Try using .next() , .toggle() ; setting display:none for elements where className begins with "popup" at css ; attaching events to selector "[class^=parent]" , elements where className begins with "parent"

$(document)
.on("mouseenter", "[class^=parent]", function(e) {
  $(this).next("[class^=popup]").toggle()
})
.on("mouseleave", "[class^=parent]", function(e) {
  $(this).next("[class^=popup]").toggle()
});
div[class^="parent"] {
  border: 2px solid green;
  padding 4px;
}
div[class^="popup"] {
  border: 2px solid red;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="parent">
  <a href="" id="hovertitle">Hover Text</a>
</div>

<div class="popup">
  test
</div>

<div class="parent2">
  <a href="" id="hovertitle">Hover Text</a>
</div>

<div class="popup2">
  test 2
</div>

jsfiddle http://jsfiddle.net/2XG9j/5/

Note, given html at Question, expected results can also be achieved using css :hover , next sibling + selector , without utilizing javascript

div[class^="parent"] {
  border: 2px solid green;
  padding 4px;
}
div[class^="popup"] {
  border: 2px solid red;
  display: none;
}
div[class^="parent"]:hover + div[class^="popup"] {
  display: block;
}
<div class="parent">
  <a href="" id="hovertitle">Hover Text</a>
</div>

<div class="popup">
  test
</div>

<div class="parent2">
  <a href="" id="hovertitle">Hover Text</a>
</div>

<div class="popup2">
  test 2
</div>

jsfiddle http://jsfiddle.net/2XG9j/6/

Upvotes: 1

Related Questions